Understanding Flutter Layout (Box)Constraints
If you have been through flutter documentation, you must have encountered the words a widget X tries to be as big as possible, or as small as possible.
I usually found myself confused about what is going on and how do I understand it? After spending hours in documentation of flutter, I think I finally understand it. Lets get to explanation.
What are constraints?
A constraint is just a property specifying the size or space a widget can take up. There can be a constraint to set size within a circle or any shape you want, but fortunately, most of the widgets and UI can be build by using simple BoxConstraint.
A BoxConstraint only cares about minWidth, maxWidth, minHeight and maxHeight.
The widget’s size should be equal or bigger than the yellow box and equal or smaller than the green box.
If a widget does not honor the constraint and is too big, some part of it is simply not painted and the widget is clipped during rendering phase.
How are widgets rendered in flutter?
Flutter creates a composition of widgets like a tree as shown in this image.
To render each widget flutter first goes down the tree and then goes back up in a single pass.
While going down, parent node passes constraints to the child. The constraints are passed from parent to child till we reach the leaf nodes of the tree and there are no child left.
Then while traveling back up, the child utilizes those constraints to calculate its size and the children node returns the size to the parent node.
No widget has information about its position. It only have information about its size. It is the work of parent widget to position it’s child widgets.
When a parent node gets the size of its children node, it can simply place each child one by one. After placing a child, it can determine position of next child using the size of the previous child and adding that many pixel offset.
Revisiting Box Constraints
So a box constraint tells you the size a widget is allowed to take. So what makes it confusing?
It turns out, that you can specify Infinity as a size as well. With this addition, you get Boxes that can be unbounded or bounded.
An unbounded widget is a widget which has either the max width or max height set to Infinity.
A bounded widget have some definite value for its max width and max height property. A bounded widget can have a tight width, tight height or both. A widget have tight width if it have same value for both min Width and max Width property. Same analogy goes for tight height.
Bounded widgets honor the constraints and try to be as big as possible.
In case of unbounded widget, we have a special case of Infinity. A widget can not try to be as big as Infinity, it is not possible.
So where do we use unbounded constraint?
We use unbounded constraint where we would need scrolling like ListView, ScrollView.
In unbounded constraint, a widget tries to be as big as possible in the bounded parameter and as small as possible in the unbounded parameter.
Final Summary
This table would sum it up.
