Your First Layout Debugging Trick

Yeah, getting a bank screen in the app and red bug screens is so much fun:

There is however a basic secret trick to debugging all layout errors.

Secret Layout Debugging Trick

The secret to layout debugging is understanding how the Flutter framework works to render the app screen from our UI code.

The whole reason we have widgets in the first place, as it’s an abstraction that the Skia rendering engine uses to paint to the screen using native code to input into the Skia rendering engine. Now, I will skip most of what Skia does and talk about the layout part.

Each UI object is not only at times an Element in an element tree but also a Render Object. And yes, that means we have another tree called the RenderObjectElement tree.

To get each UI element to draw on screen by Skia the flutter framework translates each RenderObjectElement in the tree to a RenderBox. And each RenderBox has a minimum and maximum width and height set.

And the BoxContraints class source has an explanation of the constraints every render object is based upon: