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

Issue

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!

Solution

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

Answered By - Hossein Yousefi