CODEWITHSUNDEEP
flutterimageflutter-layoutsetposition
Mikael David
Mikael David

Reputation: 75

How do I align my image to the bottom of my page in flutter?

I'm trying to set the last image on the bottom of the page. I tried the sized box between this one and the previous image but it changes depending on the device and sometimes it overflows some pixels.

Here is the code:

import 'package:flutter/material.dart';

// ignore: use_key_in_widget_constructors
class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      color: Colors.amber,
      child: Column(
        children: <Widget>[
          Image.asset("imagens/btop.png"),
          SizedBox(
            width: 200,
            height: 200,
            child: Image.asset("imagens/logo.png"),
          ),
          // ignore: prefer_const_constructors
          SizedBox(
            height: 40,
          ),
          Image.asset("imagens/bbot.png")
        ],
      ),
    ));
  }
}

Upvotes: 0

Views: 1409

Answers (3)

Kishan
Kishan

Reputation: 41

use this :

mainAxisAlignment: MainAxisAlignment.spaceBetween,

inside the Column or in this you having issue then use nested columns

Upvotes: 1

plotsklapps
plotsklapps

Reputation: 354

I would use your already existing Column() widget, like this:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [],
),

Or use Align() in a Stack() or just a Spacer()... there are so many ways to do this, which are all dependent on what you want to do next.

Check out this cheat sheet: https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e about aligning your widgets and play around with them!

Upvotes: 1

Rohan Jariwala
Rohan Jariwala

Reputation: 2048

Just use below Widget before your Image widget.

Spacer()

Upvotes: 1

Related Questions