In the previous article, we learn that flutter constraints follow this simple rule.

Constraints go down. Sizes go up. Parent sets position.

This is my attempt to explain how the flutter constraints work and how we can use them in our day-to-day flutter development.

The series is divided into three articles based on the above rule, explaining each rule with examples, common errors, and its solutions.

This article focuses on the third rule “Parents sets position”.

So Let’s get started.

What does “Parents sets position” mean?

In the previous article, we learn that how a widget defines its size, but the widget does not define its position i.e the widget’s final position on the screen. Will it be at the bottom? Top? Or at any other coordinates? The widget also does not know about the position of its sibling’s widget.

The position of a widget on the screen is set by its parent. After getting the size information from the widget, based on available space and constraints, parents set the widget position.

In the case of multiple widgets, the parent iterates through each child widget, get the size information, and based on that information sets the position of the widget.

Let’s take an example of the Center widget from the first blog of the series.

In the above example, the Container does not know where it will be positioned or aligned on the screen. It’s up to ConstraintsBox to decide the Container‘s position.

The ConstraintsBox is not designed to set its child position. It is designed to set constraints on its child. So in this case the position of ConstraintsBox will be the position of Container.

Now, What will be the ConstraintsBox position, and who will set its position?
The position will be set by its parent Center widget and it will be set in the center of the screen.

How?

The Center widget is designed to set its child ConstraintsBox position at the center based on the given constraints from its parents i.e MyApp.

For example, if the constraints pass to Center is the size of (500,700) than the Center will set its child position at (250,350). i.e the center point of available space.

In the above example, MyApp is passing tight constraints to the Center widget which forces Center to takes the full-screen size and set the ConstraintsBox position in the center of the screen.

Since MyApp is the root of the widget tree, the flutter framework by default sets its position to (0,0).

Also, if the child does not have any parentData then it will be set as the same position as its parent.

For example, if we set Text “Hello” as a child of MyApp then MyApp will set the Text widget position at (0,0) or we can say the same position of MyApp.

Note: To set the position of a child, the parent should know the child’s size first. Hence rule 3 applies after rule 2 is completed.

DevTool Tip

You can also check the position of the widget in a tree using devtools.

Thing to remember

There is no rule on how the parent will position its child. It completely depends on the implementation and design of the parent widget.

For example,

Row widget will position its children one after another in a horizontal line.

Column widget will position its children one after another in a vertical line.

Stack widget will position its children on top of each other based on their order.

Center widget will position its child to the center of the total space available to the Center widget.

You can design your own custom widget to set positions differently.

If you really want to deep dive into how these calculations are done then I highly recommend watching this video.

To summarize

• The widget tells its parent about its own size (within the original constraints, of course).
• After getting the size from its children, the parent widget positions its children (horizontally in the x-axis, and vertically in the y-axis), one by one.

Limitations

• A widget can’t know and doesn’t decide its own position in the screen, since it’s the widget’s parent who decides the position of the widget.
• Since the parent’s size and position, in its turn, also depends on its own parent, it’s impossible to precisely define the size and position of any widget without taking into consideration the tree as a whole.

Common widget constraint problems and solutions

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

This error mostly happens when we try to use the ListView (unbounded) inside Column (unbounded). You can fix this issue by using Flexible or Expanded widget to wrap each child or ListView.

Filip Harcek did a wonderful job explaining this exact error. I highly recommend watching this.

Resources and Credits

1. https://flutter.dev/docs/testing/common-errors
2. https://medium.com/flutter/how-to-debug-layout-issues-with-the-flutter-inspector-87460a7b9db#738b
3. From official flutter, doc checks out Understanding constraints.
4. A Deep Dive Into Flutter Box Constraints by Naresh Idiga

That’s it for the third and final rule folks!!

Thank you for taking the time to read this article.

If you have any questions please let me know in the comments or you can reach me on Twitter or Email me.

If you like this kind of content then you can subscribe to my blog and be the first one to get notified when any new content is published.

If you like this article, please like and share it with your friends/colleagues and help me to spread the word.

Photo by Braden Collum on Unsplash