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

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

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**



Tech guy, building stuff.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store