A widget that displays its children in a one-dimensional array.
The Flex widget allows you to control the axis along which the children are placed (horizontal or vertical). This is referred to as the main axis. If you know the main axis in advance, then consider using a Row (if it's horizontal) or Column (if it's vertical) instead, because that will be less verbose.
To cause a child to expand to fill the available vertical space, wrap the child in an Expanded widget.
The Flex widget does not scroll (and in general it is considered an error to have more children in a Flex than will fit in the available room). If you have some widgets and want them to be able to scroll if there is insufficient room, consider using a Block.
If you only have one child, then rather than using Flex, Row, or Column, consider using Align or Center to position the child.
Layout algorithm
Layout for a Flex proceeds in six steps:
- Layout each child a null or zero flex factor (e.g., those that are not
Expanded) with unbounded main axis constraints and the incoming
cross axis constraints. If the
crossAxisAlignmentisCrossAxisAlignment.stretch, instead use tight cross axis constraints that match the incoming max extent in the cross axis. - Divide the remaining main axis space among the children with non-zero flex factors (e.g., those that are Expanded) according to their flex factor. For example, a child with a flex factor of 2.0 will receive twice the amount of main axis space as a child with a flex factor of 1.0.
- Layout each of the remaining children with the same cross axis
constraints as in step 1, but instead of using unbounded main axis
constraints, use max axis constraints based on the amount of space
allocated in step 2. Children with
Flexible.fitproperties that areFlexFit.tightare given tight constraints (i.e., forced to fill the allocated space), and children withFlexible.fitproperties that areFlexFit.looseare given loose constraints (i.e., not forced to fill the allocated space). - The cross axis extent of the Flex is the maximum cross axis extent of the children (which will always satisfy the incoming constraints).
- The main axis extent of the Flex is determined by the mainAxisSize
property. If the mainAxisSize property is
MainAxisSize.max, then the main axis extent of the Flex is the max extent of the incoming main axis constraints. If the mainAxisSize property isMainAxisSize.min, then the main axis extent of the Flex is the sum of the main axis extents of the children (subject to the incoming constraints). - Determine the position for each child according to the
mainAxisAlignmentand thecrossAxisAlignment. For example, if themainAxisAlignmentisMainAxisAlignment.spaceBetween, any main axis space that has not been allocated to children is divided evenly and placed between the children.
- Inheritance
Constructors
-
Flex({Key key, @required Axis direction, MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, MainAxisSize mainAxisSize: MainAxisSize.max, CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, TextBaseline textBaseline, List<Widget> children: const
[] }) -
Creates a flex layout.
Properties
- crossAxisAlignment → CrossAxisAlignment
-
How the children should be placed along the cross axis.
read-only - direction → Axis
-
The direction to use as the main axis.
read-only - mainAxisAlignment → MainAxisAlignment
-
How the children should be placed along the main axis.
read-only - mainAxisSize → MainAxisSize
-
How much space space should be occupied in the main axis.
read-only - textBaseline → TextBaseline
-
If aligning items according to their baseline, which baseline to use.
read-only - children → List<Widget>
-
The widgets below this widget in the tree.
read-only, inherited - hashCode → int
-
Get a hash code for this object.
read-only, inherited - key → Key
-
Controls how one widget replaces another widget in the tree.
read-only, inherited - runtimeType → Type
-
A representation of the runtime type of the object.
read-only, inherited
Operators
-
operator ==(
other) → bool -
The equality operator.
inherited
Methods
-
createRenderObject(
BuildContext context) → RenderFlex -
Creates an instance of the
RenderObjectclass that thisRenderObjectWidgetrepresents, using the configuration described by thisRenderObjectWidget. -
updateRenderObject(
BuildContext context, RenderFlex renderObject) → void -
Copies the configuration described by this
RenderObjectWidgetto the givenRenderObject, which will be of the same type as returned by this object'screateRenderObject. -
createElement(
) → MultiChildRenderObjectElement -
RenderObjectWidgets always inflate to a
RenderObjectElementsubclass.inherited -
debugFillDescription(
List<String> description) → void -
Add additional information to the given description for use by toString.
inherited -
didUnmountRenderObject(
RenderObject renderObject) → void -
A render object previously associated with this widget has been removed from the tree. The given RenderObject will be of the same type as returned by this object's createRenderObject.
inherited -
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a non-existent method or property is accessed.
inherited -
toString(
) → String -
Returns a string representation of this object.
inherited -
toStringShort(
) → String -
A short, textual description of this widget.
inherited