Flutter - Using Expanded Widget Examples

This tutorial gives you examples of how to control widget size in Flutter using Expanded widget.

In Flutter, what if you have a widget whose size should fill the available space. There's a widget called Expanded that's suitable for that purpose. Expanded is a widget that expands its child to fill the available space.

Using Expanded Widget

Below is the constructor of Expanded.

  const Expanded({
    Key key,
    int flex = 1,
    @required Widget child,
  })

Below is the description of the arguments you can pass on the constructor.

• Key key: The widget key, used to control if it should be replaced.
• int flex: The flex factor for the child. Defaults to 1.
• Widget child *: The widget under this widget in tree which will be expanded based on the available space.

*: required

You need to pass a Widget as child.

In the below example, there is a Row with the width of its children set to 50. One of the children is wrapped inside an Expanded widget.

  SizedBox(
    height: 50,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Container(
          width: 50,
          color: Colors.red,
        ),
        Expanded(
          child: Container(
            width: 50,
            color: Colors.green,
          ),
        ),
        Container(
          width: 50,
          color: Colors.blue,
        ),
        Container(
          width: 50,
          color: Colors.yellow,
        ),
      ],
    ),
  )

Output:

In the output, the second child which is wrapped inside Expanded is much wider than the other children. We can think that Flutter puts all children without Expanded first, then gives all the remaining space to the second child.

  SizedBox(
    height: 50,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Container(
          width: 50,
          color: Colors.red,
        ),
        Expanded(
          child: Container(
            width: 50,
            color: Colors.green,
          ),
        ),
        Container(
          width: 50,
          color: Colors.blue,
        ),
        Expanded(
          child: Container(
            width: 50,
            color: Colors.yellow,
          ),
        ),
      ],
    ),
  )

Output:

Using Expanded with flex

What if you need to wrap some widgets with Expanded, but you want them to have different sizes. You can pass flex property.

  SizedBox(
    height: 50,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Container(
          width: 50,
          color: Colors.red,
        ),
        Expanded(
          flex: 2,
          child: Container(
            width: 50,
            color: Colors.green,
          ),
        ),
        Expanded(
          flex: 3,
          child: Container(
            color: Colors.blue,
          ),
        ),
        Expanded(
          child: Container(
            width: 50,
            color: Colors.yellow,
          ),
        ),
      ],
    ),
  )

Output:

Expanded requires its child to fill the available space. If you want to allow the child to be smaller than the available space, you can read our tutorial about Flexible widget.