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(),
],
),
],
),
);
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.