The "Expanded" and "Flexible" widgets in Flutter are both used in conjunction with the "Flex" layout widget to distribute space among children in a Flex container. Both widgets can be used to specify how much space a child should take up within the Flex container.
The "Expanded" widget takes a single child and expands it to fill any remaining space in the Flex container. It takes a single property called "flex" which is a positive number that determines the proportion of remaining space the child should take up. For example, if a Flex container has three children, each wrapped in an Expanded widget with a flex value of 1, the children will take up equal amounts of remaining space.
Here is an example of how to use the Expanded widget with flex values of 1 and 2 to distribute space among two children:
Flex(
direction: Axis.horizontal,
children: [
Expanded(
flex: 1,
child: Container(color:Colors.red),
),
Expanded(
flex: 2,
child: Container(color:Colors.blue),
),
],
)
The "Flexible" widget, on the other hand, also takes a single child and expands it to fill remaining space but it also allows the child to shrink if the Flex container becomes smaller than the total size of its children. It also takes a single property called "flex" which is a positive number that determines the proportion of remaining space the child should take up.
Here is an example of how to use the Flexible widget with flex values of 1 and 2 to distribute space among two children:
Flex(
direction: Axis.horizontal,
children: [
Flexible(
flex: 1,
child: Container(color:Colors.red),
),
Flexible(
flex: 2,
child: Container(color:Colors.blue),
),
],
)
In general, if you want a child to take up all remaining space, regardless of the size of its siblings, use the Expanded widget. If you want the child to shrink when the Flex container becomes smaller than the total size of its children, use the Flexible widget.
Video Link: