Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: Trying to bottom-center an item in a Column, but it keeps left-aligning

I'm trying to bottom-center a widget at the bottom of a Column, but it keeps aligning to the left.

return new Column(
  new Stack(
    new Positioned(
      bottom: 0.0, 
      new Center(
        new Container(),
      ),
    ),
  ),
); 

The existence of the Positioned forces the Container to the left, instead of centering. Removing the Positioned, however, puts the Container in the middle-center.

like image 970
Mary Avatar asked Aug 18 '17 00:08

Mary


People also ask

How do you center elements in Flutter?

In Flutter, to vertically center a child widget inside a Container, you can wrap the child widget with Column and add mainAxisAlignment: MainAxisAlignment. center to it.

How do you change the alignment on Flutter?

To set the alignment of a widget in Flutter, you can wrap it as the child of an Align widget and pass the alignment argument to adjust the position.


3 Answers

Align is the way to go if you have only one child.

If you have more, consider doing something like this:

return new Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
      // Your elements here
  ],
);
like image 113
Rémi Rousselet Avatar answered Oct 20 '22 11:10

Rémi Rousselet


The easiest and the correct way to do it - use Spacer()

Example:

Column(
    children: [
      SomeWidgetOnTheTop(),
      Spacer(),
      SomeCenterredBottomWidget(),
    ],
);
like image 24
Andrew Avatar answered Oct 20 '22 13:10

Andrew


Expanded(
  child: Align(
    alignment: FractionalOffset.bottomCenter,
      child: Padding(
        padding: EdgeInsets.only(bottom: 10.0),
          child: //Your widget here,
    ),
  ),
),
like image 72
Abhijith Brumal Avatar answered Oct 20 '22 13:10

Abhijith Brumal