Understanding Flutter box constraints & the unbounded heights, width error

Box constraints are an important concept in Flutter, they determine how the UI is drawn on the screen relative to the dimensions given in the code.
A constraint is just a set of 4 doubles: a minimum and maximum width, and a minimum and maximum height, this should not be confused with sizes that are definite sizes of width and height.

How box constraints work

In flutter, box constraints are passed down from the parent to the child or children, and this helps to determine the space available to such child or children. If the parent is a scaffold, the constraints passed down to the direct child would be the screen dimension. The container would also pass down a new constraint to its child and so on.

Given a widget tree like the above, where the root widget is a scaffold the following are true:

• The flutter framework passes down a constraint to the scaffold automatically
• The direct child of the Scaffold widget gets the passed down constraint and is bounded by this constraint. In simple terms, this means the direct child of the scaffold is restricted from taking more space than the screen dimension of:
  width->(min:0.0, max:375.0),
  height->(min:0.0, height:812.0)

Unbounded widgets

Earlier, I mentioned that all parent widgets in Flutter pass a constraint down to their children, this is true for most widgets except a few which i would call unbounded widgets. Specifically, widgets like listView, row, column get a constraint from their parent like every other but pass double.Infinity to their children as a constraint which is as good as not passing a constraint at all.

This behavior as intended by the flutter team and helps with responsiveness since an app would typically be built for all sorts of screen sizes. To pass a constraint to the children of an unbounded widget, we need to wrap such widget with either Flexible or Expanded, this way flutter calculates the remaining space on the screen and passes this as a constraint to the child. To control this constraint, you can use the flex property on both the Flexible and Expanded widgets.

**add code image here**

Unbounded height, width error

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

The above error is an exception you will get when you nest an unbounded widget directly inside another unbounded widget. It’s a common but strange error to most newbie Flutter developers. But fear not, there is a very simple explanation for this error and an even simpler solution.

Like I pointed out earlier, an unbounded widget will not pass a constraint to its children by default, so if you nest multiple unbounded widgets (Widgets that would by default try to take the whole available space), you would get the above exception. This makes sense since there is currently no constraint (double.Infinity) passed to the nested widget, as a result, Flutter RenderBox doesn't know renders an unbounded widget within an unbounded widget (i hope that makes sense (:-. to resolve this issue, simply wrap the nested widget with Expanded and just like that, Expanded calculates the available space and passes this to the nested widget as a constraint. Like before you can use the flex parameter to control how much space the nested widget takes relative to the other children of the parent.

**add code image here**