How to align a Column's child to the bottom

Question

I'm trying to build a generic home page and I want to align the last child of my column (which contains all the widgets for the page) to the bottom of the screen but the widget wrapped in the Align is not moving. The following is what makes the most sense to me:

Column(   mainAxisSize: MainAxisSize.max,   children: <Widget>[     ChildA(),     ChildB(),     Align(       alignment: Alignment.bottomCenter,       child: BottomAlignedChild()     )   ] ) 

What am I doing wrong?

Answer 1

You can use Expanded to make the last widget expand to the whole remaining space.

import 'package:flutter/material.dart';  void main() => runApp(MyApp());  class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'My Layout',       theme: ThemeData(         primarySwatch: Colors.blue,       ),       home: MyHomePage(),     );   } }  class MyHomePage extends StatelessWidget {   @override   Widget build(BuildContext context) {     return new Scaffold(       appBar: new AppBar(         title: new Text("Align Bottom Demo"),       ),       body: new Column(children: <Widget>[         new Text("Text 1"),         new Text("Text 2"),         new Expanded(             child: new Align(                 alignment: Alignment.bottomCenter,                 child: new Row(                   mainAxisAlignment: MainAxisAlignment.center,                   children: <Widget>[                     new Icon(Icons.star),                     new Text("Bottom Text")                   ],                 )))       ]),     );   } } 

Here is the result

Answer 2

I have always used Spacer for these kind of cases in Column or Row. Spacer takes up all the available space between two widgets of Row/Column.

For given example, you can try following

     Column(       mainAxisSize: MainAxisSize.max,       children: <Widget>[         ChildA(),         ChildB(),         Spacer(),         BottomAlignedChild()             ]     )