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

Time:10-07

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")
        ],
      ),
    ));
  }
} 

CodePudding user response:

Just use below Widget before your Image widget.

Spacer()

CodePudding user response:

use mainaxisalignment:MainAxisAlignment.SpaceBetween, inside column or in this you having issue then use nested columns and also set mainAxisSize: mainAxisSize.max, if needed

CodePudding user response:

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!

  • Related