When you are learning basic Flutter widgets, such as the Container Widget, you will often encounter them when looking at official documentation
to size itself to the
child, to honor the
width
.
height
, and
constraints, to expand to fit the parent, to be as small as possible.
It is necessary for us to understand:
- What is Constraints?
- How many Constraints subclasses are there in Flutter?
- How does Constraints relate to Widget Size?
- What is the type of BoxConstraints?
- What does BoxConstraints do?
What is Constraints?
An abstract set of layout constraints.
Concrete layout models (such as box) will create concrete subclasses to communicate layout constraints between parents and children.
A specific layout model requires the creation of a corresponding Constraints subclass to pass the layout Constraints between parent and child Widgets.
How many Constraints subclasses are there in Flutter?
By looking at the Flutter code, there are currently two Constraints subclasses in Flutter (more subclasses are expected later).BoxConstraints and SilverConstraints. According to the instructions for Constraints, BoxConstraints is created for the Box layout model and SilverConstraints is created for the Silver layout model. All we need to know is that The former is used to display objects in 2D (cartesian) coordinates, while the latter is used to display objects that respond to scrolling. The differences between these two layout models will be discussed in a later article. Let’s look at BoxConstraints first:
BoxConstraints maxWidth, minWidth maxHeight, minHeight four member variables, and BoxConstraints need to meet:
-
0.0 <=
minWidth <=
maxWidth <=
double.infinity -
0.0 <=
minHeight <=
maxHeight <=
double.infinity
Double. Infinity.
How does Constraints relate to Widget Size?
The Widget node’s size (which consists of the specified width and height) follows the Constraints passed to it by the parent, but requires that it satisfy the following conditions:
-
minWidth <=
Size.width <=
maxWidth -
minHeight <=
Size.height <=
maxHeight
What is the type of BoxConstraints?
-
Tight constraints:These constraints strictly limit the options available for constraints when confirming the render object’s Size. (If the minWidth of the constraints is equal to maxWidth, in which case, We call this constraint tight width), such as the MaterialApp Widget (the application framework provided by flutter), will be passed tight constraint to fill the entire mobile phone screen (with different specific values depending on the mobile phone screen);
-
Loosen your constraints.Compared with the tight constraint, the loose constraint will only limit the value of maxWidth or maxHeight, and the value of minWidth or minHeight to 0.
-
Bounded constraints:MaxWidth or maxHeight is smaller than double. Infinitybool get hasBoundedWidth => maxWidth < double.infinity;bool get hasBoundedHeight => maxHeight < double.infinity;
-
To bounded by unbounded constraints:The maxWidth or maxHeight value in constraints is double. Infinity
-
Expending Constraints:Constraints in the maxWidth maxHeight, minWidth and minHeight have to double infinity;
What is the role of Constraints?
In Flutter, widgets store only basic information, and render is done by the RenderBox object, which is given constraints by its parent and resizes itself according to those constraints. Specifically, the layout model in the Flutter framework is a tree structure of RenderBox objects arranged in order to start rendering from the root of the tree model and pass constraints to the children. These constraints will be passed to the final child, and from the final child back to the root, and in the process of returning, The child adjusts its Size to the constraints it receives and passes this Size up to the parent:
Conclusion:
This section summarizes the layout and related terms of the Flutter. The next section will introduce the detailed explanation of the Flutter Widget Container. Container is closely combined with the knowledge mentioned in this section, and is a necessary basic knowledge for a full understanding of Container.