Flutter position stack widget in center

Question

I have widgets in a stack so I d like to position my button bar in the bottom center of the stack but nothing works  The widget just sticks to the left side  here is my code   new Positioned              bottom  40 0              child  new Container                margin  const EdgeInsets all 16 0                 child  new Column                  mainAxisAlignment  MainAxisAlignment center                  children   lt Widget gt                     new Align                      alignment  Alignment bottomCenter                      child  new ButtonBar                        alignment  MainAxisAlignment center                        children   lt Widget gt                           new OutlineButton                            onPressed                                   Navigator push                                  context                                  new MaterialPageRoute                                      builder   context    gt  new LoginPage                                                             child  new Text                               Login                               style  new TextStyle color  Colors white                                                                                   new RaisedButton                            color  Colors white                            onPressed                                   Navigator push                                  context                                  new MaterialPageRoute                                      builder   context    gt                                          new RegistrationPage                                                             child  new Text                               Register                               style  new TextStyle color  Colors black                                                                                                                                                                                               I have literally tried every center alignment  please help

User · Answer

You can use the Positioned fill with Align inside a Stack   Stack    children   lt Widget gt             Positioned fill        child  Align          alignment  Alignment centerRight          child

User · Answer

A Stack allows you to stack elements on top of each other  with the last element in the array taking the highest priority  You can use Align  Positioned  or Container to position the children of a stack  Align Widgets are moved by setting the alignment with Alignment  which has static properties like topCenter  bottomRight  and so on  Or you can take full control and set Alignment 1 0  -1 0   which takes x y values ranging from 1 0 to -1 0  with  0 0  being the center of the screen    Stack        children            Align            alignment  Alignment topCenter            child  Container                height  80                width  80  color  Colors blueAccent                                 Align            alignment  Alignment center            child  Container                height  80                width  80  color  Colors deepPurple                                 Container            alignment  Alignment bottomCenter               alignment  Alignment 1 0  -1 0             child  Container                height  80                width  80  color  Colors amber

User · Answer

The Problem is the Container that gets the smallest possible size   Just give a width  to the Container  in red  and you are done   width  MediaQuery of context  size width      new Positioned    bottom  0 0    child  new Container      width  MediaQuery of context  size width      color  Colors red      margin  const EdgeInsets all 0 0       child  new Column        mainAxisAlignment  MainAxisAlignment center        children   lt Widget gt           new Align            alignment  Alignment bottomCenter            child  new ButtonBar              alignment  MainAxisAlignment center              children   lt Widget gt                 new OutlineButton                  onPressed  null                  child  new Text                     Login                     style  new TextStyle color  Colors white                                                     new RaisedButton                  color  Colors white                  onPressed  null                  child  new Text                     Register                     style  new TextStyle color  Colors black

User · Answer

Probably the most elegant way  You can simply use the alignment option present in Stack child  Stack    alignment  Alignment center

User · Answer

For anyone who is reaching here and is not able to solve their issue  I used to make my widget horizontally center by setting both right and left to 0 like below   Stack      children   lt Widget gt         Positioned          top  100          left  0          right  0          child  Text  Search                 style  TextStyle                    color  Color 0xff757575                     fontWeight  FontWeight w700                    fontFamily   Roboto                     fontStyle  FontStyle normal                    fontSize  56 0                 textAlign  TextAlign center

User · Answer

The Best way worked for me  was using Align  I needed to make the profile picture of a user in the bottom center of the Cover picture  return Container    height  220    color  Colors red    child  Stack      children          Container          height  160          color  Colors yellow                 Align          alignment  Alignment bottomCenter          child  UserProfileImage                             This worked like a charm

User · Answer

You can try this too   Center    child  Stack      children

User · Answer

Remove everything  but this   Align    alignment  Alignment bottomCenter    child  new ButtonBar      alignment  MainAxisAlignment center      children   lt Widget gt         new OutlineButton          onPressed                 Navigator push              context              new MaterialPageRoute                builder   context    gt  new LoginPage                         child  new Text             Login             style  new TextStyle color  Colors white                             new RaisedButton          color  Colors white          onPressed                 Navigator push              context              new MaterialPageRoute                builder   context    gt                  new RegistrationPage                         child  new Text             Register             style  new TextStyle color  Colors black                                      In my theory  the additional Container is destroying it  I would advise you to just surround this by adding Padding   Padding    padding  EdgeInsets only bottom  20 0     child  Align         This seems a lot more reasonable to me than the Positioned and also I do not quite understand your Column with a single child only

User · Answer

You can change the Positioned with Align inside a Stack   Align    alignment  Alignment bottomCenter    child             For more info about Stack  Exploring Stack

User · Answer

Thanks to all of the above answers I d like to share something that may come in handy in some certain cases  So lets see what happens when you use Positioned   right  0 0  left 0 0  bottom 0 0            Padding          padding  const EdgeInsets all 4 0           child  Stack            children   lt Widget gt               Positioned                  bottom  0 0                  right  0 0                  left  0 0                  child  Padding                    padding  const EdgeInsets symmetric horizontal  8 0                     child  Container                        color  Colors blue                        child  Center                          child  Text  Hello                             style  TextStyle color  Color 0xffF6C37F                             fontSize  46  fontWeight  FontWeight bold                                                                                                                      This would be the output of the above code     As you can see it would fill the whole width with the container even though you don t want it and you just want the container to wrap its children  so for this you can try trick below         Padding          padding  const EdgeInsets all 4 0           child  Stack            children   lt Widget gt               Positioned                  bottom  0 0                  right  0 0                  left  0 0                  child  Row                    mainAxisAlignment  MainAxisAlignment center                    children   lt Widget gt                       Container                        Padding                        padding  const EdgeInsets symmetric horizontal  8 0                         child  Container                            color  Colors blue                            child  Text  Hello                               style  TextStyle color  Color 0xffF6C37F                                fontSize  46  fontWeight  FontWeight bold                                                                        Container

User · Answer

Have a look at this solution I came up with Positioned  child  SizedBox  child  CircularProgressIndicator    width  50  height  50    left  MediaQuery of context  size width   2 - 25

[dart] Flutter position stack widget in center

Examples related to dart

Examples related to flutter