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
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
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.
Center widget is designed to set its child
ConstraintsBox position at the center based on the given constraints from its parents i.e
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.
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 will set the
Text widget position at (0,0) or we can say the same position of
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.
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.
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
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.
- 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.
- 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
Expanded widget to wrap each child or
Filip Harcek did a wonderful job explaining this exact error. I highly recommend watching this.
Resources and Credits
- From official flutter, doc checks out Understanding constraints.
- 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 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.