Flutter unbounded height error if using Spacer in Column inside another Column

Question

I am stuck... This is my code broken down:

 Column(
    children: [
      Column(
        children: [
          Text('Whyy'),
          Spacer(),
          Text('crash?'),
        ],
      ),
      Text('ok'),
    ],
  ),

This crashes with the error:

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

When a column is in a parent that does not provide a finite height constraint, for example if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the vertical direction. These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.

But why? Why on earth is this crashing? The Parent-Column is inside a Scaffolds body.

What am I missing here?

Let me know if you need any more information!

Details on Flutter's layout algorithm and how/why this exception happens (and how to solve it): https://stackoverflow.com/a/66718208/2301224 — Baker, Dec 01 '21 at 05:20

score 5 · Accepted Answer · answered Nov 30 '21 at 22:51

This is because the inner column does not have any constraint on its height, so the Spacer widget can take an infinitely large space. You can set an actual constraint on the inner column's height by wrapping it with an Expanded (or any other height constraining widget like SizedBox):

Column(
  children: [
    Expanded(
      child: Column(
        children: [
          Text('No'),
          Spacer(),
          Text('crash!'),
        ],
      ),
    ),
    Text('ok'),
  ],
),

Flutter unbounded height error if using Spacer in Column inside another Column

1 Answers1