Flutter - LayoutBuilder Widget

In Flutter, LayoutBuilder Widget is similar to the Builder widget except that the framework calls the builder function at layout time and provides the parent widget's constraints. This is useful when the parent constrains the child's size and doesn't depend on the child's intrinsic size. The LayoutBuilder's final size will match its child's size.

The builder function is called in the following situations:

• The first time the widget is laid out.
• When the parent widget passes different layout constraints.
• When the parent widget updates this widget.
• When the dependencies that the builder function subscribes to change.

Syntax:

LayoutBuilder(
 builder: (BuildContext context, BoxConstraints constraints) {
 return Widget();
 }
)

Click to learn about BoxConstraints.

Example 1: Using the parent's constraints to calculate the child's constraints. Most common use case of LayoutBuilder Widget.

Output:

Example 2: We can also use LayoutBuilder Widget to display different UI's for different screen sizes.

Output: