How to align a Column's child to the bottom

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

Demo


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()
     
      ]
    )

If you are flexible to change column to a stack, you can do the following.

body: Container(
    child: Stack(children: <Widget>[
      Text('Text 1'),
      Text('Text 2'),
      Align(
        alignment: Alignment.bottomCenter,
        child: Text(
          "Text in bottom",
        ),
      ),
    ]),
  ),

Tags:

Dart

Flutter