How to align a container block to the end of a screen in Flutter?

Question

In my Flutter project, I have initialized a container. Inside that Container I have a child 'column' and inside that I initialized 3 icons as my widget. So, I want to align the entire container block ( White block in the picture given below) to the end of the screen vertically. As far as I know from the documentation, that it can be done by the following command-

mainAxisAlignment: MainAxisAlignment.end

But it is not working here and showing the following output-

And here's my code-

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: SafeArea(

          child: Container(
            color: Colors.white,
            child: Column(

              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.end,

              children: <Widget>[
                Icon(Icons.star, size: 50),
                Icon(Icons.star, size: 50),
                Icon(Icons.star, size: 50),
              ],
            )
          ),
        ),
      ),
    );
  }

}

So, I need help to know how I can align the white block into the end of the screen.

Answer 1

You just need to change mainAxisSize: MainAxisSize.min to mainAxisSize: MainAxisSize.max

Currently you column widget is only making itself as tall as it needs to be. changing to MainAxisSize.max will have it expand to the full height you are looking for.

Further reading: https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e

Answer 2

Yes this is happening because by default the container and the column are being aligned at the top left corner of the screen. MainAxisAlignment.end is actually working except that your column is so short that the .end and .start are essentially the same in terms of alignments. What you need to do instead is this:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: SafeArea(
          child: Align(
            widthFactor: double.infinity,
            heightFactor: double.infinity,
            alignment: Alignment.bottomRight,
            child: Container(
                color: Colors.white,
                child: Column(

                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.end,

                  children: <Widget>[
                    Icon(Icons.star, size: 50),
                    Icon(Icons.star, size: 50),
                    Icon(Icons.star, size: 50),
                  ],
                )
            ),
          ),
        ),
      ),
    );
  }

}

Answer 3

Try using crossAxisAlignment: CrossAxisAlignment.end instead of mainAxisAlingment.

EDIT: As @Stephen mentioned you need full height in order to align the children. Besides that you can also set full width to the container to get the children exactly at the end of the screen.

Note: The top-level widget usually constrains the sub-level widgets!

body: SafeArea(

          child: Container(
            color: Colors.white,
            width: double.infinity,
            child: Column(

              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.end,

              children: <Widget>[
                Icon(Icons.star, size: 50),
                Icon(Icons.star, size: 50),
                Icon(Icons.star, size: 50),
              ],
            )
          ),
        ),

If you want to keep the height to be exactly that of the icons, you can use stack instead. It will look something like this:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: SafeArea(
          child: Stack(
            children: <Widget>[
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                top: 0,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Icon(Icons.star, size: 50),
                    Icon(Icons.star, size: 50),
                    Icon(Icons.star, size: 50),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}