CODEWITHSUNDEEP
dartflutter
Mattia C.
Mattia C.

Reputation: 731

How to align a Column's child to the bottom

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?

Upvotes: 32

Views: 32325

Answers (5)

Phuc Tran
Phuc Tran

Reputation: 8073

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

enter image description here

Another approach is using Spacer():

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

Upvotes: 52

CopsOnRoad
CopsOnRoad

Reputation: 267554

There are multiple ways of doing it.

  1. Use Spacer:

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

  2. Use mainAxisAlignment:

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

  3. Combine Expanded and Align:

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

Screenshot (same for all)

enter image description here

Upvotes: 5

Irshad Kumail
Irshad Kumail

Reputation: 1273

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

Upvotes: 17

Rahul Sahni
Rahul Sahni

Reputation: 485

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

Upvotes: 0

RasikaSam
RasikaSam

Reputation: 5573

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

Upvotes: 3

Related Questions