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?

Try adding `new Flexible(child: new Container()),` before the last widget. There might be better ways though. — Günter Zöchbauer, May 24 '18 at 11:28
@GünterZöchbauer the last child is not on the bottom of the screen, is the column wrapping its children? I tried to expand the Column but it just disappears — Mattia C., May 24 '18 at 11:29
Wraping the `Align` into an `Expanded` is most likely the desired effect — Rémi Rousselet, May 24 '18 at 12:04
have a look at this answer https://stackoverflow.com/a/56327933/2850120 — Rishabh Agrawal, May 02 '21 at 19:57

Phuc Tran · Accepted Answer · 2022-12-15T01:22:09.600

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

Another approach is using Spacer():

...
Column(children: [Text1, Text2, Spacer(), YourBottomWidget()]),
...

Thanks... This was very helpful to me when trying to achieve bottomLeft alignment. — ThunderBird, May 08 '20 at 21:09
This is scaling the corresponding widget to the width's size. @IrshadKumail's answer is correct and simple. — Davoud, Jun 12 '21 at 09:15
What if I want Text 1 and Text 2 to be center and then the Bottom Text at its bottom . What will we do — Zar E Ahmer, Dec 14 '22 at 07:15

score 17 · Answer 2 · answered Jun 23 '20 at 04:53

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

CopsOnRoad · Answer 3 · 2021-07-20T15:40:42.437

There are multiple ways of doing it.

Use Spacer:

Column(
  children: <Widget>[
    TopContainer(),
    Spacer(), // <-- Spacer
    BottomContainer(),
  ],
)

Use mainAxisAlignment:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // <-- spaceBetween
  children: <Widget>[
    TopContainer(),
    BottomContainer(),
  ],
)

Combine Expanded and Align:

Column(
  children: <Widget>[
    TopContainer(),
    Expanded(
      child: Align(
        alignment: Alignment.bottomCenter,
        child: BottomContainer(),
      ),
    ),
  ],
)

Screenshot (same for all)

score 3 · Answer 4 · answered Aug 01 '19 at 02:15

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

score 0 · Answer 5 · answered Jun 18 '20 at 14:56

You can try wrapping the widgets which needs to be at the top inside another Column widget, thereby making the root widget containing only two children. 1st child containing all the widgets which need to be aligned at the top and the 2nd child containing widget which is to be placed at the bottom. Now you use mainAxisAlignment: MainAxisAlignment.spaceBetween to align 1st child to the top and second to the bottom.

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    Column(
      children: <Widget>[
        ChildA(),
        ChildB(),
      ]
    ),
    BottomAlignedChild(),
 ]
);

How to align a Column's child to the bottom

5 Answers5

Linked