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

Question

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

User · Accepted Answer

Align is the way to go is 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
  ],
);

User · Answer

The easiest and the correct way to do it - use Spacer   Example  Column      children          SomeWidgetOnTheTop          Spacer          SomeCenterredBottomWidget

User · Answer

Expanded    child  Align      alignment  FractionalOffset bottomCenter        child  Padding          padding  EdgeInsets only bottom  10 0             child    Your widget here

User · Answer

If you wish to leave content as it  can wrap it with scrollable   Useful if you have inputs in the children         return Stack        children   lt Widget gt           Positioned            child  SingleChildScrollView                child  Column                    children  children                       add Container                        height  56     button heigh  so could scroll underlapping area                                              Positioned            child  Align              alignment  Alignment bottomCenter              child  button

User · Answer

Wrap your Container in SingleChildScrollView   widget  Then it will not come above when keyboard pops up

User · Answer

Widget  bottom         return Column        mainAxisAlignment  MainAxisAlignment start        children            Expanded            child  Container              color  Colors amberAccent              width  double infinity              child  SingleChildScrollView                child  Column                  mainAxisAlignment  MainAxisAlignment start                  crossAxisAlignment  CrossAxisAlignment start                  children  new List lt int gt  generate 50   index    gt  index   1                       map  item                      return Text                      item toString                        style  TextStyle fontSize  20                                           toList                                                                    Container            color  Colors blue            child  Row              mainAxisAlignment  MainAxisAlignment center              children                  Text                   BoTToM                   textAlign  TextAlign center                  style  TextStyle fontSize  33

User · Answer

I have used this approach    What i want is  A layout always in bottom but whenever Keyboard pops-up that layout also comes over it    body  Container          color  Colors amber          height  double maxFinite          child  new Stack              alignment new Alignment x  y            children   lt Widget gt               new Positioned                child  myWidget context  data iconName  Colors red                              new Positioned                child  new Align                  alignment  FractionalOffset bottomCenter                  child  myWidget context  data iconName  Colors green

User · Answer

Just expanding the answers    Spacer is an option no one mentioned yet  it is used in case you prefer not to use Positioned   Align  Align works if you want to specify the alignment of a child inside a parent  Use it anywhere but directly inside Stack Positioned is similar to Align  but works only under Stack directly

User · Answer

To do this easily  the use of Stack is better  Create a Stack Then inside Stack add Align or Positioned and set position according to your needed  You can add multiple Container  Container   child  Stack      children   lt Widget gt         Align           alignment  FractionalOffset center           child  Text               quot   1000 quot                             Positioned          bottom  0          child  Container             width  double infinity             height  30             child  Text                quot Balance quot                                                      Stack a widget that positions its children relative to the edges of its box  Stack class is useful if you want to overlap several children in a simple way  for example having some text and an image  overlaid with a gradient and a button attached to the bottom

User · Answer

In addition of Stack  to avoid floating container on keyboard  use this return Scaffold      appBar  getAppBar title       resizeToAvoidBottomInset  false      body

User · Answer

1  You can use an Align widget  with FractionalOffset bottomCenter   2  You can also set left  0 0 and right  0 0 in the Positioned

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

Examples related to footer

Examples related to centering

Examples related to flutter