The "Flex" widget in Flutter is a multi-purpose layout widget that allows you to align and distribute space among children in a single flex container. The Flex widget is part of the Flexbox layout system, which is designed to help create flexible, responsive designs.
The Flex widget takes several properties, including:
- direction: the main axis along which the children should be placed. It can be either Axis.horizontal or Axis.vertical.
- children: a list of widgets that are placed inside the Flex container.
- mainAxisAlignment: the alignment of the children along the main axis. It can be one of MainAxisAlignment.start, MainAxisAlignment.end, MainAxisAlignment.center, MainAxisAlignment.spaceBetween, MainAxisAlignment.spaceAround, or MainAxisAlignment.spaceEvenly.
- crossAxisAlignment: the alignment of the children along the cross axis. It can be one of CrossAxisAlignment.start, CrossAxisAlignment.end, CrossAxisAlignment.center, CrossAxisAlignment.stretch, or CrossAxisAlignment.baseline.
Here is an example of how to use the Flex widget to align three buttons horizontally, with equal space between them:
Flex(
direction: Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FlatButton(
onPressed: () {},
child: Text('Button 1'),
),
FlatButton(
onPressed: () {},
child: Text('Button 2'),
),
FlatButton(
onPressed: () {},
child: Text('Button 3'),
),
],
)
It's worth noting that Flex widget is often used in conjunction with other widgets like Expanded, Flexible and LayoutBuilder to create complex and responsive layout.
Video Link: