Flutter Vertically center column

Question

How to vertically center a column in Flutter  I have used widget  new Center   I have used widget  new Center   but it does not vertically center my column   Any ideas would be helpful       override Widget build BuildContext context      return Scaffold      appBar  AppBar        title  Text  Thank you               body  new Center        child  new Column          children   lt Widget gt             new Padding              padding  new EdgeInsets all 25 0               child  new AnimatedBuilder                animation  animationController                child  new Container                  height  175 0                  width  175 0                  child  new Image asset  assets angry face png                                   builder   BuildContext context  Widget  widget                    return new Transform rotate                    angle  animationController value   6 3                    child   widget                                                                            new Text  We are glad we could serve you      style  new TextStyle                fontSize  16 0                fontWeight  FontWeight w600                color  Colors black87               new Padding padding  new EdgeInsets symmetric vertical  5 0  horizontal  0 0              new Text  We appreciate your feedback       style  new TextStyle                fontSize  13 0                fontWeight  FontWeight w200                color  Colors black87

User · Answer

For me the problem was there was was Expanded inside the column which I had to remove and it worked  Column            mainAxisAlignment  MainAxisAlignment center            crossAxisAlignment  CrossAxisAlignment center            children   lt Widget gt               Expanded     remove this               flex  2                child  Text  quot content here quot

User · Answer

Try   Column   mainAxisAlignment  MainAxisAlignment center   crossAxisAlignment  CrossAxisAlignment center   children children

User · Answer

With Column  use   mainAxisAlignment  MainAxisAlignment center   It align its children s  to center of its parent Space vertically

User · Answer

CrossAlignment center is using the Width of the  Child Widget  to center itself and hence gets rendered at the start of the page  When the Column is centered within the  page body s  Center Container    the CrossAlignment center uses page body s  Center  as reference and renders the widget at the center of the page  Code import  package flutter material dart    void main     gt  runApp MaterialApp      title  quot DynamicWidgetApp quot       home DynamicWidgetApp          class DynamicWidgetApp extends StatefulWidget     override   DynamicWidgetAppState createState     gt  DynamicWidgetAppState         class  DynamicWidgetAppState extends State lt DynamicWidgetApp gt      override   Widget build BuildContext context         return Scaffold        body  Center         Removing body Center will change the reference        and render the widget at the start of the page          child  Column              mainAxisAlignment   MainAxisAlignment center              crossAxisAlignment   CrossAxisAlignment center              children                  Text  quot My Centered Widget quot                                              floatingActionButton  FloatingActionButton             onPressed            child   Icon Icons add

User · Answer

You control how a row or column aligns its children using the mainAxisAlignment and crossAxisAlignment properties  For a row  the main axis runs horizontally and the cross axis runs vertically  For a column  the main axis runs vertically and the cross axis runs horizontally    mainAxisAlignment  MainAxisAlignment center   crossAxisAlignment  CrossAxisAlignment center

User · Answer

Another Solution   If you want to set widgets in center vertical form  you can use ListView for it   for eg  I used three buttons and add them inside ListView which followed by      shrinkWrap  true  -  With this ListView only occupies the space which needed     import  package flutter material dart    class List extends StatelessWidget      override   Widget build BuildContext context        final button1           new RaisedButton child  new Text  Button1    onPressed              final button2           new RaisedButton child  new Text  Button2    onPressed              final button3           new RaisedButton child  new Text  Button3    onPressed              final body   new Center        child  ListView          shrinkWrap  true          children   lt Widget gt  button1  button2  button3                       return new Scaffold          appBar  new AppBar            title  Text  Sample                       body  body             void main       runApp new MaterialApp      home  List              Output

User · Answer

Try this one  It centers vertically and horizontally  Center    child  Column      mainAxisAlignment  MainAxisAlignment center      children  children

User · Answer

You could use  mainAxisAlignment MainAxisAlignment center This will the material through the center in the column wise   crossAxisAlignment  CrossAxisAlignment center  This will align the items in the center in the row wise  Container  alignment Alignment center  Child  Column      Simply use  Center   Child  Column      or rap with Padding widget   And adjust the Padding such the the column children are in the center

User · Answer

Solution as proposed by Aziz would be    Column    mainAxisAlignment  MainAxisAlignment center    crossAxisAlignment  CrossAxisAlignment center    children children      It would not be in the exact center because of padding   padding  new EdgeInsets all 25 0     To make exactly center Column - at least in this case - you would need to remove padding

User · Answer

While using Column  use this inside the column widget   mainAxisAlignment  MainAxisAlignment center It align its children s  to the center of its parent Space is its main axis i e  vertically or  wrap the column with a Center widget  Center    child  Column      children   lt ListOfWidgets gt           if it doesn t  resolve the issue wrap the parent container with a Expanded widget   Expanded     child Container       child  Column         mainAxisAlignment  MainAxisAlignment center         children  children

[flutter] Flutter : Vertically center column

Examples related to flutter