Flutter - Using Flexible Widget Examples

This tutorial shows you how to use Flexible widget in Flutter.

If you're using a Flex widget such as Row or Column, how to control the size of a child relatively to other children? It can be done easily using Flexible widget. Just wrap each child widget inside a Flexible. In this tutorial, I'm going to show you some examples of how to use Flexible widget.

Using Flexible

This is the constructor of Flexible.

  const Flexible({
    Key key,
    this.flex = 1,
    this.fit = FlexFit.loose,
    @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.
• FlexFit fit: How the child is inscribed into the available space. Defaults to FlexFit.loose.
• Widget child *: The widget under this widget in tree.

*: required

You are required to pass a Widget as child. flex is an important property here. It determines the flex factor which affects the size of the child.

In the below example, the first child has a flex value of 3. The second and the third's flex values are 1 and 2 respectively. In total, 3 + 1 + 2 = 6. Therefore, the fractions of each child in order are 3/6, 1/6, and 2/6.

  Column(
    children: <Widget>[
      Flexible(
        flex: 3,
        child: Container(
          color: Colors.red,
        )
      ),
      Flexible(
          flex: 1,
          child: Container(
            color: Colors.green,
          )
      ),
      Flexible(
          flex: 2,
          child: Container(
            color: Colors.blue,
          )
      ),
    ],
  )

Output:

Setting Fit Type

What if we modify the code above by specifying the height of a child. For example, the height of the first child is set to 150.

  Column(
    children: <Widget>[
      Flexible(
        flex: 3,
        child: Container(
          height: 150,
          color: Colors.red,
        )
      ),
      Flexible(
          flex: 1,
          child: Container(
            color: Colors.green,
          )
      ),
      Flexible(
          flex: 2,
          child: Container(
            color: Colors.blue,
          )
      ),
    ],
  )

Output:

As you can see in the output, the size of the first child is reduced to the specified height. That's because the default value of the fit property is FlexFit.loose which allows the size of the child to be smaller than the available space but not larger than the available space. Changing the value to FlexFit.tight forces the child to fill the available space.

  Column(
    children: <Widget>[
      Flexible(
        flex: 3,
        fit: FlexFit.tight,
        child: Container(
          height: 150,
          color: Colors.red,
        )
      ),
      Flexible(
          flex: 1,
          child: Container(
            color: Colors.green,
          )
      ),
      Flexible(
          flex: 2,
          child: Container(
            color: Colors.blue,
          )
      ),
    ],
  )

Output:

That's how to use Flutter's Flexible widget. You may also consider to use SizedBox if you want a widget to have a fixed size. For spacing between widgets, Spacer widget can be the solution.