A widget that controls how a child of a Row, Column, or Flex flexes.
Using a Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column), but, unlike Expanded, Flexible does not require the child to fill the available space.
So if you wrap your widget with a Flexible, there are two things that can happen based on the parameter fit.
If you wrap your widget with loose fit, your widget will try to take up the remaining least amount of space available along the main axis. For example if you have a container inside a column with height 600 pixels but the only available space is maybe 250 pixels, the container ends up being 250 pixels. On the other hand, if our container is 150 pixels but the available space is more than that, the container will be 150 pixels which was assigned to it. That means in loose fit, the widget will expand as far as it needs to show the content, not more than that.
When tight fit is used, the widgets dimension inside the Column or Row along the main axis has no bearing at all. Let’s take the container example which has height 150 pixels from before which is inside a Column widget. When you wrap the container with a Flexible with a tight fit, the Flexible will ignore the height of the child container altogether and take up whatever space is available, could be 10 pixels, could be 300 pixels, whatever space is left.
How a flexible child is inscribed into the available space. Use FlexFit class to represent the values. This class defines two constants which are tight and loose.
The flex factor to use for this child.
If null or zero, the child is inflexible and determines its own size. If non-zero, the amount of space the child's can occupy in the main axis is determined by dividing the free space (after placing the inflexible children) according to the flex factors of the flexible children.
A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.
Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.
Expanded widget is a shorthand for Flexible with tight fit.
Just like Flexible widget you can use this argument to specify the expanding behaviour. By default the value is tight, but you can change this to loose using this argument.
Similar way you can use this argument to specify the flex factor of the widget.
If you want to a widget to expand as much available space there is along the main axis inside a Column or Row then use Exapaned but if you feel that you want to let a widget expand along the main axis inside a Column or Row but don’t want it to Expand beyond a certain dimension becuase of legal reasons or maybe for a better customer experience, switch to Flexible with loose fit.
Spacer creates an adjustable, empty spacer that can be used to tune the spacing between widgets in a Flex container, like Row or Column.
The Spacer widget will take up any available space, so setting the Flex.mainAxisAlignment on a flex container that contains a Spacer to MainAxisAlignment.spaceAround, MainAxisAlignment.spaceBetween, or MainAxisAlignment.spaceEvenly will not have any visible effect: the Spacer has taken up all of the additional space, therefore there is none left to redistribute.
You can use this argument to specify the flex factor. If you have more than one spacer you can use this argument to specify how each of the **Spacer** widget will take up the space.
Row(
children: <Widget>[
Text('Begin'),
Spacer(), // Defaults to a flex of one.
Text('Middle'),
// Gives twice the space between Middle and End than Begin and Middle.
Spacer(flex: 2),
Text('End'),
],
)