Flutter Box Constraints: Nested Columns & Rows
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
Summary
This is the third post of a three part series about box constraints. If you haven’t read my previous posts, please go through them here.
Box Constraints 101:
Box Constraints: Columns and Rows:
In continuation to the previous post, let’s see how the box constraints work with nested Columns and Rows.
Explanation
As discussed in the previous post, the Column/Row passes an infinite constraint along the main axis to its child. So the constraints in a nested Column/Row would look something like this along their main axis, no surprises there. The box constraints are right outside its blue bubble in orange colour.
Now, if you add a Container with infinite height within the nested Column, you would get the following error as there is no box constraint from the parent, no surprises there as we discussed this in the previous post.
Now, if you add a Container with infinite height within the nested Column, you would get the following error as there is no box constraint from the parent, which makes sense.
BoxConstraints forces an infinite height
Let’s proceed with the solution we went with in the previous post by wrapping it with an Expanded widget.
What do you think happens now? You will get the following error:
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
But why?
Because:
- Expanded will expand as much as the parent would let it
- The height constraint of the parent, which is the nested Column, is infinite.
As a comparison, if you have Container as a direct child and wrap it with an Expanded, Expanded will check with the parent and see that the height constraint is 712 and expand to that but in the nested Column case, when the Expanded widget looks to its parent, it sees infinite height as constraint and hence it tries to expand to infinite and we get the RenderFlex error.
The way to fix it would be to wrap the nested Column with an Expanded or its sibling Flexible which then passes a height constraint to the nested child Column. That should fix the issue.
The main takeaway is, when you work with Column(s)/Row(s), always make sure the children are getting the required height constraints.
Happy Coding!
Checkout the native app I created using flutter. Currently only deployed to Apple’s App Store. Google’s Play Store is taking more time to review because of Covid delays.
Also, if possible give me a follow on twitter
