Flutter Deep Dive Part 1: “RenderFlex children have non-zero flex…

Scott Stoll
Mar 20 · 4 min read
Deep Dive Part 1, by Scott Stoll. Twitter: @scottstoll2017

This article is part of a four-part series. You can find the others here:

In addition to speaking about Flutter and embarrassing myself in front of audiences on two continents, I recently decided to do a deep dive. All of my friends do deep dives on cool things like Animation, State Management, Gestures or Testing.

Me? I decided to do a deep dive on an error message.

But this is no ordinary error message. If InheritedWidget is Flutter’s Monad (and it is), then “RenderFlex children have non-zero flex but incoming height constraints are unbounded” is our Boogeyman (Uomo Nero, Бугимен, Hombre Boogeyman, بعبع , Mumus, Croque-mitaine, Baba Yaga, John Wick).

Da Boogeyman (Image CC-0)

It should also be noted that our Boogeyman has a few brothers and sisters you might see now and then:

  • “RenderConstrainedBox object was given an infinite size during layout.”
  • “BoxConstraints forces an infinite width.”
  • And more you’ll be able to recognize after you‘ve read this deep dive.

Relax, all of these errors are nothing more than small variations on a single theme. The error messages are different because in each of these cases the error is being caused by something different but, in the end, it all boils down to the same problem:

Something is trying to be infinitely large, nothing is there to stop it, and you need to fix that.

Once you understand the way things work under the hood, it gets easier and easier to know exactly what to do when the Boogeyman crawls out from under your bed.

You send John Wick, of course.

Wading Into the Baby Pool

Please note that all these code examples are custom formatted to be a little easier to read. I don’t format my working code like this…

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

This Widget Will Cause a RenderFlex Error

What’s happening here is a Row/Column is not being passed size constraints by its parent (“Incoming Constraints are Unbounded”) but its child is trying to “flex” to be as big as possible (“Render Flex Children Have Non-Zero Flex”). The reason this is a problem is that either the parent or child has to tell the Row/Column what size to be, but that’s not happening. The child is saying, “Go to infinity”, and the parent is saying, “Do whatever you want”.

The quick, baby pool fix is to change the mainAxisSize of theRow/Column to MainAxisSize.min, then wrap the child that wants to be infinitely large in an Expanded.

The Same Widget, Fixed

“BoxConstraints forces an infinite height (or width).”:

Possibly the worst code I’ve ever written, but it makes the point.

This error can be in the mainAxis or the crossAxis:

  • If the problem is in the mainAxis you can fix it by putting the offending child inside of an Expanded.
  • If it’s along the crossAxis and you nested Rows and Columns inside of each other, then you need to put the nestedRow/Column into an Expanded instead.

“RenderConstrainedBox object was given an infinite size during layout.”:

It actually took some effort to break it in just the right way to cause this error…

How do we deal with this? Well, there are a few things you might try, but not all of them would be successful:

  • Giving the Container a specific height will fix it.
  • Giving the SizedBox a specific height will fix it.
  • Wrapping the Container with an Expanded will not fix it. That actually causes a bottom overflow.
  • Wrapping the SizedBox with an Expanded will cause: “Incorrect use of ParentDataWidget. Expanded widgets must be placed directly inside Flex widgets.”

The last error, the one about ParentDataWidget? It means an Expanded can only be used inside of a Row or Column but you tried to use it somewhere else.

So, that was the baby pool. Wasn’t that easy?

Flutter Community

Articles and Stories from the Flutter Community

Thanks to Paulina Szklarska, Nash, Nawal Alhamwi, Tomek Polański, and Muhammed Salih Guler

Scott Stoll

Written by

Freelance Flutter Developer | Speaker | Workshop Presenter. Organizer of GDG Cleveland. Twitter: @scottstoll2017 https://learnflutter.io

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade