Flutter - Using ConstrainedBox Widget Examples

This tutorial provides some examples of how to ConstrainedBox widget in Flutter.

ConstrainedBox is a widget that imposes additional constraints on its child. While you can set only the width and the height of a widget using SizedBox widget, with ConstrainedBox, you can also set the minimum and maximum values of the widget's width and height thanks to the usage of BoxConstraints. Below are some examples of how to use ConstrainedBox.

Using ConstrainedBox

This is the constructor you need to call.

  ConstrainedBox({
    Key key,
    @required this.constraints,
    Widget child,
  })

• Key key: The widget key, used to control if it should be replaced.
• BoxConstraints constraints: The additional constraints to impose on the child.
• Widget child *: The widget under this widget in tree.

For using ConstrainedBox, you need to create a BoxConstraints. BoxConstraints allows you to define the minimum and maximum width and height of a widget. Below is the constructor of BoxConstraints.

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

The values must satisfy these rules:

• 0.0 <= minWidth <= maxWidth <= double.infinity
• 0.0 <= minHeight <= maxHeight <= double.infinity

Let's start with an example.The below example wraps a widget as the child of a ConstrainedBox where the BoxConstraints has maxWidth value set.

  ConstrainedBox(
    constraints: const BoxConstraints(
        maxWidth: 90,
    ),
    child: Container(
      color: Colors.teal,
      child: Text(
        'Woolha dot com',
        textAlign: TextAlign.center,
        style: TextStyle(color: Colors.white, fontSize: 22),
        overflow: TextOverflow.visible,
      ),
    ),
  )

Output:

As you can see in the result, the constraint limits the width of the widget's width so that the text is wrapped into the next line.

 

Here's another example with minWidth and minHeight values are set.

  ConstrainedBox(
    constraints: const BoxConstraints(
        minHeight: 50.0,
        minWidth: 200.0,
    ),
    child: RaisedButton(
      color: Colors.teal,
      child: Text('Woolha', style: TextStyle(color: Colors.white)),
      onPressed: () {},
    ),
  )

Output:

 

What if we have nested ConstrainedBox widgets.

  ConstrainedBox(
    constraints: const BoxConstraints(
      minWidth: 100,
      minHeight: 80,
    ),
    child: ConstrainedBox(
      constraints: const BoxConstraints(
        minWidth: 200,
        minHeight: 30,
      ),
      child: RaisedButton(
        color: Colors.teal,
        child: Text('Woolha', style: TextStyle(color: Colors.white)),
        onPressed: () {},
      ),
    ),
  )

Output:

It turns out that Flutter combines both constraints. In this case, it uses the outer constraint's minHeight because it's greater than the inner's. For minWidth, it uses the inner's because it's greater than the outers.

 

In the following example, BoxConstraints doesn't work because there are already size constraints from the SizedBox.

  SizedBox(
    width: 100,
    height: 50,
    child: ConstrainedBox(
      constraints: const BoxConstraints(
        maxWidth: 50,
        maxHeight: 10,
      ),
      child: RaisedButton(
        color: Colors.teal,
        child: Text('Woolha', style: TextStyle(color: Colors.white)),
        onPressed: () {},
      )
    ),
  )

Output:

If the parent already has size constraints and you want the constraint not applied to its child, you can consider to use UnconstrainedBox.

That's how to use ConstrainedBox widget in Flutter which can be useful for imposing additional constraints to a widget. You can also read about:

• SizedBox, a widget used for setting width and height constraints.
• UnconstrainedBox, a widget that imposes no constraints on its child.
• OverflowBox, a widget that allows you to impose different constraints to the child and allows the child to overflow its parent.