Flutter column doesn't expand

Question

I am a complete newbie in Flutter, but I already like it. The question is: why is the column not expanding to the full height?

code is on gist.github

screenshot

Please include the code in your question, not just a link to it. — Herohtar, Mar 16 '18 at 20:34

score 42 · Answer 1 · answered Nov 26 '20 at 14:27

42

Using CrossAxisAlignment.stretch works for me:

   Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
          Text("Some title"),
          Text("Address"),
          Text("Description")
      ],
   ),

answered Nov 26 '20 at 14:27

Maker Jr

437
4
3

4

CrossAxisAlignment on columns refers to the horizontal width. If you set CrossAxisAlignment.stretch, it will stretch left to right and not up to down. – Code on the Rocks Nov 26 '20 at 15:52
I get this: Cannot hit test a render box that has never been laid out – jws Mar 24 '21 at 18:02
1

Does not work well if you have a CircularProgressIndicator inside the column. – Ashkan Sarlak Apr 07 '22 at 22:31

score 35 · Answer 2 · edited May 25 '18 at 03:09

A Column widget is flexible - it will try to take up as much space as it needs but no more. If you want it to take up all availible space, then wrap it in an Expanded widget.

createChildren() {
  return [
    Image.network(
      testImg,
      height: imageSize,
      width: imageSize,
    ),
    Padding(padding: EdgeInsets.only(left: 16.0)),
    Expanded(child:
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          boldText("Some title"),
          Text("Address"),
          Text("Description")
        ],
      ),
    ),
  ];
}

This only works if the `Column` is inside another `Flex` widget, as `Expanded` can only be placed inside a `Flex` widget. — Michel Feinstein, Aug 20 '19 at 00:18

score 8 · Answer 3 · answered Jul 09 '19 at 14:43

8

Wrapping the column with a row with MainAxisSize.max

Row(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Column(
            children: <Widget>[
              _someWidget(),
              _someWidget(),
              _someWidget(),
            ],
          ),
        ],
      )

answered Jul 09 '19 at 14:43

Pablo Cegarra

20,955
12
92
110

4

This didn't work for me. To get it to work, I had to wrap the nested column within an Expanded. `mainAxisSize` wasn't necessary. – Joe Lapp Oct 26 '19 at 15:25

score 3 · Answer 4 · answered Mar 02 '21 at 08:03

3

Don't use flex=1 inside Column, here you can see example

children: [
    MyWidget(),
    Expanded(
      child: MyWidget(),
    ),
    MyWidget(),
  ],

answered Mar 02 '21 at 08:03

Sunil

3,211
3
21
21

score 3 · Answer 5 · answered May 08 '21 at 07:32

Based on your layout I assume that your Column is nested inside a Row. Wrap your Row with IntrinsicHeight and your Column will automatically expand its height to be the same as the Row's tallest child:

IntrinsicHeight(
                child: Row(
                  children: [
                    Container(width: 40, height: 40, color: Colors.blue),
                    // tallest child
                    Container(width: 40, height: 60, color: Colors.blue),
                    // height will be 60
                    Column(
                      ...
                    ),

                  ],
                ),
              )

score 2 · Answer 6 · answered Apr 07 '22 at 23:02

You can wrap the Column inside an infinite width SizedBox.

SizedBox(
  width: double.infinity,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [ ... ]
  )
)

The above code snippet will place the children at the center of the SizedBox. It'll work especially well if you want to use a Column as the body of your Scaffold. In that case children will show up at the center of the screen.

score 0 · Answer 7 · answered Dec 02 '22 at 05:57

The code linked in the question is no longer available, so I can't give you a full working example for your case. However, one thing that will likely work is using mainAxisAlignment as follows:

   Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      mainAxisSize: MainAxisSize.max,
      children: [
          Text("Some title"),
          Text("Address"),
          Text("Description")
      ],
   ),

(mainAxisSize: MainAxisSize.max is actually the default value, butthis only works if you do not set it to MainAxisSize.min, so I included it here.)

Setting mainAxisAlignment to MainAxisAlignment.spaceAround or MainAxisAlignment.spaceEvenly will also expand the column, but spacing between/around children will be handled differently. Try it out and see which you like best!

This will cause the column to take all the space it can - if it still doesn't expand then that is due to its parent widget, and we can no longer access the code so I can't speak to that.

Flutter column doesn't expand

7 Answers7