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: <Widget>[
          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),),
        ],
      ),
    ),
  );
}

score 345 · Accepted Answer · edited Apr 23 '21 at 17:28

345

Solution as proposed by Aziz would be:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    //your widgets here...
  ],
)

It would not be in the exact center because of padding:

padding: EdgeInsets.all(25.0),

To make exactly center Column - at least in this case - you would need to remove padding.

edited Apr 23 '21 at 17:28

Lucas Macêdo

23
1
7

answered Jul 26 '18 at 19:31

Zeusox

7,708
10
31
60

I needed a Center to wrap your solution, otherwise, the column would be left aligned. – kakyo Apr 11 '22 at 13:03

Shady Aziza · Answer 2 · 2018-09-14T12:37:05.970

63

Try:

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
 children:children...)

edited Sep 14 '18 at 12:37

answered Jul 26 '18 at 19:16

Shady Aziza

50,824
20
115
113

2

Tried this before. It does center, but it does not DEAD center it ? – Zeusox Jul 26 '18 at 19:22
3

It was a padding issue. Now it works fine, thanks ! – Zeusox Jul 26 '18 at 19:29

score 31 · Answer 3 · answered Jun 21 '20 at 01:44

31

Try this one. It centers vertically and horizontally.

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: children,
  ),
)

answered Jun 21 '20 at 01:44

Lucas Chwe

2,578
27
17

score 23 · Answer 4 · answered Dec 09 '19 at 13:58

23

With Column, use:

mainAxisAlignment: MainAxisAlignment.center

It align its children(s) to center of its parent Space vertically

answered Dec 09 '19 at 13:58

Deepak swain

3,380
1
30
26

score 16 · Answer 5 · answered Feb 05 '20 at 00:13

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,

score 15 · Answer 6 · answered Nov 25 '20 at 07:18

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: <ListOfWidgets>,
  ),
)

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

Expanded works! I was dealing with nested Column, and it worked in my case — Nehal Jaisalmeria, Aug 30 '23 at 10:45

Jitesh Mohite · Answer 7 · 2021-07-03T11:04:58.327

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: <Widget>[button1, button2, button3],
     ),
    );

    return new Scaffold(
        appBar: new AppBar(
          title: Text("Sample"),
        ),
        body: body);
  }
}    
void main() {
  runApp(new MaterialApp(
    home: List(),
  ));
}

Output:

This is exactly what i needed. Love the way Center and ListView is combined here. — jksevend, Nov 17 '20 at 12:25

srt111 · Answer 8 · 2021-02-09T11:12:47.220

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() => runApp(MaterialApp(
    title:"DynamicWidgetApp",
    home:DynamicWidgetApp(),

));

class DynamicWidgetApp extends StatefulWidget{
  @override
  DynamicWidgetAppState createState() => DynamicWidgetAppState();
  }

class  DynamicWidgetAppState extends State<DynamicWidgetApp>{
  @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("My Centered Widget"),
            ]
          ),
      ),
      floatingActionButton: FloatingActionButton(
        // onPressed: ,
        child : Icon(Icons.add),
      ),
      );
    }
  }

not working dear for me. thanks to share. – Kamlesh Mar 11 '21 at 13:30 — Kamlesh, Mar 11 '21 at 13:30

score 6 · Answer 9 · answered Sep 10 '20 at 11:07

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: <Widget>[
            Expanded( // remove this
              flex: 2,
              child: Text("content here"),
            ),
          ],
        )

score 3 · Answer 10 · answered Jul 26 '20 at 13:45

3

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.

answered Jul 26 '20 at 13:45

S.R Keshav

1,965
1
11
14

1

This is definitely the answer i was looking for!!! All previous answers would place a widget in the center of Col, but the Col itself is not in the center! resulting in the widgets not really being centered.. Thank you OP – RanH Jun 07 '21 at 05:57

score 0 · Answer 11 · answered Mar 01 '22 at 06:57

You can also wrap the Column widget by Align.

Align(
    alignment: Alignment.center,
    child: Column(
        children: [
            Container(
                width: 300,
                margin: const EdgeInsets.fromLTRB(0, 70, 0, 0),
                child: TextFormField(decoration: const InputDecoration(hintText: "First Name"))
            ),
            ...
        ]
    )
)

Checkout this website for different ways of centering a widget: Link

score 0 · Answer 12 · answered Sep 15 '22 at 05:46

0

In Addition, If you used

mainAxisAlignment: MainAxisAlignment.start

for centering all children but you still one of the children to be centered , Simply use Center() widget on the children.

answered Sep 15 '22 at 05:46

Md omer arafat

398
7
10

Flutter : Vertically center column

12 Answers12

Linked