Flutter: Expanded vs Flexible

I've used both Expanded and Flexible widgets and they both seem to work the same.

What is the difference between Expanded and Flexible?

Scaffold(
  appBar: AppBar(),
  body: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          buildExpanded(),
          buildFlexible(),
        ],
      ),
      Row(
        children: <Widget>[
          buildExpanded(),
          buildExpanded(),
        ],
      ),
      Row(
        children: <Widget>[
          buildFlexible(),
          buildFlexible(),
        ],
      ),
    ],
  ),
);

Expanded is just a shorthand for Flexible

Using Expanded this way:

Expanded(
  child: Foo(),
);

is strictly equivalent to:

Flexible(
  fit: FlexFit.tight,
  child: Foo(),
);

---

You may want to use Flexible over Expanded when you want a different fit, useful in some responsive layouts.

The difference between FlexFit.tight and FlexFit.loose is that loose will allow its child to have a maximum size while tight forces that child to fill all the available space.

Widget under Flexible are by default WRAP_CONTENT although you can change it using parameter fit.

Widget under Expanded is MATCH_PARENT you can change it using flex.

Expanded - it is Flexible with set fit

class Expanded extends Flexible {
    const Expanded({
        Key key,
        int flex = 1,
        @required Widget child,
    }) : super(
        key: key, 
        flex: flex, 
        fit: FlexFit.tight, 
        child: child
    );
}

You may use Flexible to resize the widgets in rows and columns. It's mainly used to adjust the space of the different child widgets while keeping the relation with their parent widgets.

Meanwhile, Expanded changes the constraints sent to the children of rows and columns; it helps to fill the available spaces there. Therefore, when you wrap your child in an Expanded widget it fills up the empty spaces.

Providing these videos from the Flutter's Official YouTube channel just to help out people, who might look for this in the upcoming future...

1. Expanded:

2. Flexible:

Expanded() is nothing more than Flexible() with

Flexible (fit: FlexFit.tight) = Expanded()

but, Flexible uses fit :FlexFit.loose by default.

FlexFit.tight = Wants to fit tight into parent taking as much space as possible.

FlexFit.loose = Wants to fit loose into parent taking as little space as possible for itself.

Expanded changes the constraints of a child widget so it fills any empty space. Expanded widget is a specialised Flexible widget with a set fit - Flexible(fit: FlexFit.tight. Expanded widgets also have a flex property.

Flexible makes the child widget flexible and resizable. You can add the flex or fit property to adjust the size and spacing.

Flexible fit properties include:

• FlexFit.loose - The widget’s preferred size is used. (Default)
• FlexFit.tight - Forces the widget to fill all of its extra space.

Flexible default will share the available space of the parent widget, but will NOT force the child to fit the space.

Expanded will share the available space of the parent widget, and force the child widget to change its width/height to fill the available space.

In fact, Expanded extends Flexible, which is a Flexible with FlexFit.tight. See the official document.

Here is a Container widget and three Flexible Widgets(flex = 1, fit = FlexFit.loose) in a row. We can see that the three flexible widgets share the same maxWidth (1/3 of the available screen width), and the blue one wants bigger than it, and the others want smaller. But as we can see, the blue guy has maxWidth as its width and the other widgets' width just fit their content.

Here is the code of the image above up:

        Row(
          mainAxisSize: MainAxisSize.max,
          children: [
            Container(
                color: Colors.teal,
                child: Text(
                  'Container Text ',
                )),
            Flexible(
              child: Container(
                  color: Colors.blue,
                  child: Text(' Text.Flexible Text.Flexible Text.Flexible.')),
            ),
            Flexible(
              child: Container(
                  color: Colors.yellow, child: Text('Flexible Text.')),
            ),
            Flexible(
              child: Container(
                  color: Colors.lightGreen, child: Text('Flexible.')),
            ),
          ],
        )