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.

Constraints is an abstract layout constraint class,



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. Infinity
    bool 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:



The parent passes constraints to each of the children. The final layout of the children needs to comply with these constraints. This is similar to the parents’ agreement that if you go out to play as A child, you can play as you like, but you have to be home for dinner by 6 o ‘clock.
2. The child nodes B1 and B2 can have their own constraints, and B1 can also pass that constraint to its child node C until C has no children, and when you grow up and have a family, you also make your children have to be home for dinner by 6 o ‘clock
3. Child node B1 can determine its Size according to the constraints received from parent node A, its own situation (width,height), and the Size uploaded by child node C. After collecting the layout information, child node B can transmit the information upward to node A.


For a Box Model, the constraints passed down from the parent to the child are called BoxConstraints, which determine the maximum, minimum width, and maximum and minimum height allowed for the child. For example, here is the Box constraints passed down from the parent to the child. It means that the child node can occupy any Size in the green box, that is: the width of the child node is between 150 and 300, the height is between 100 and infinity, and then the child node meets the constraints of the parent node and the Size of its own needs to occupy factors to confirm the final Size (Size), and inform the parent node;




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.