What is Flex in Flutter | Expanded Widget

Expanded Widgets

Almost every Flutter layout uses rows and columns, and they are pretty cool.

They can hug their children tightly or spread them out and relax. Similarly, Wrap Widget use for Responsive Application. These widgets are made good looking apps.

But what if you had like one of those children to stretch and fill the extra space? The answer is very simple. Just wrap it in an Expanded widget.

When a row or column lays out its children, it does the inflexible ones first. Then it divides the remaining space among the flexible ones, like Expanded. You can even set a flex factor, just in case of competition.

Here is the code and output for Expanded Widget.





Now, wrap the container with Expanded Widget and see the magic.

Center(
child: Column(
children: <Widget>[
Expanded(
child: Container(
color: Colors.blue,
height: 100,
width: 100,
),
),
Expanded(
child: Container(
color: Colors.amber,
width: 100,
height: 100,
),
),
Expanded(
child: Container(
color: Colors.blue,
height: 100,
width: 100,
),
),
],
),
),



Here is all about the Expanded Widget. Hope this will helpful for you all.

Previous
Next Post »