Flutter - BoxConstraints Widget

In Flutter, layout is all about constraints. Every widget in the widget tree is built using a constraint-based layout system:

• Parents pass constraints to their children.
• Children must obey those constraints and decide their own size.
• Parents then position the children within the available space.

At the core of this system is the BoxConstraints class, which defines the minimum and maximum width/height that a widget can have. Understanding BoxConstraints is key to mastering Flutter layouts.

What is BoxConstraints?

BoxConstraints is a built-in widget in Flutter SDK. Its functionality is to add size constraints on its child widget. It is usually taken as the object of constraints property in ConstrainedBox widget. It comes packed with many properties for customization. Below we will see all its properties with an example.

Constructor of BoxConstraints:

 It paints a box with the mentioned constraints.

const BoxConstraints(
 {double minWidth: 0.0,
 double maxWidth: double.infinity,
 double minHeight: 0.0,
 double maxHeight: double.infinity}
)

Constructor of BoxConstraints.expand :

It paints a box which expands to fill its parent BoxConstraints widget.

const BoxConstraints.expand(
 {double? width,
 double? height}
)

Constructor of BoxConstraints.loose:

It created a box which does not grow beyond the mentioned size. 

BoxConstraints.loose(
 Size size
)

Constructor of BoxConstraints.tight:

 It will create a box which does not change its size.

BoxConstraints.tight(
Size size
)

Constructor of BoxConstraints.tightfor:

 It will paint a box on the screen by just mentioning its height and width.

const BoxConstraints.tightFor(
 {double? width,
 double? height}
)

Constructor of BoxConstraints.tightForFinite:

 Here we get a box whose height and width are set to infinity if not mentioned.

const BoxConstraints.tightForFinite(
 {double width: double.infinity,
 double height: double.infinity}
)

Properties of BoxConstraints widget:

• biggest: This property takes in Size class as the object to specify the biggest the box can get.
• flipped: The flipped property takes in BoxConstraints class as the object to flip the height and width properties of the widget.
• hasBoundedHeight: This property takes in a boolean as the object to specify whether the maxHeight has an upper limit.
• hasBoundedWidth: This property takes in a boolean as the object to specify whether the maxWidth has an upper limit.
• hasInfiniteHeight: This property also takes in a boolean as the object to determine whether the box has infinite height.
• hasInfiniteWidth: This property also takes in a boolean as the object to determine whether the box has infinite width.
• hasTightHeight: This property determines whether the box height will be fixed to only one value or not by taking in a boolean as the object.
• hasTightWidth: This property determines whether the box width will be fixed to only one value or not, by taking in a boolean as the object
• isNormalized: It also takes in a boolean value as the object to specify if the maximum and minimum height and width will be the same or not.
• isTight: The isTight property also takes in a boolean as the object to determine whether the box constraints will be fixed to only one height and width or not.
• maxHeight: This property takes in a double value as the object to control the maximum height the box can get to.
• maxWith: This property takes in a double value as the object to control the maximum width box will get to.
• minHeight: This property takes in a double value as the object to control the minimum height box will get to.
• minWidth: This property takes in a double value as the object to control the minimum width box will get to.
• smallest: This property controls the smallest size the box can achieve by taking in Size class as the object.

Example 1:

Output:

Explanation:

Inside the Container widget which is a child of Center widget (Parent widget in the body) the constraints property is holding BoxConstraints widget. Inside that the minHeight and minWidth are set to 50 px and maxHeight and maxWidth is set to 80 px. The Container is green colored and is holding white colored text. The constraints that are set will not allow the container to have a height and width greater than 80 px and less than 50 px.

Example 2

Output:

Explanation:

This flutter app is similar to the previous one, except the fact the child widget in the Container which was a Text is replaced by another Container widget. The second container is assigned a color of greenAccent[400], and the child is a Text widget. The constraints property in the second container is taking BoxConstraints.expand as the object, with its height and width property set to 50 px each. The BoxConstraints.expands is expanding in its parent BoxConstraints to a height and width of 50 px. And because of the fact it expands, it always starts from the center.