Flutter: Expanded vs Flexible

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

enter image description here


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 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.