AnimatedFlex class

A widget that displays its children in a one-dimensional array.

The AnimatedFlex 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 space in the direction of this widget's main axis, wrap the child in an Expanded widget.

The AnimatedFlex widget does not scroll (and in general it is considered an error to have more children in a AnimatedFlex 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 ListView.

The AnimatedFlex widget does not allow its children to wrap across multiple horizontal or vertical runs. For a widget that allows its children to wrap, consider using the Wrap widget instead of AnimatedFlex.

If you only have one child, then rather than using AnimatedFlex, Row, or Column, consider using Align or Center to position the child.

Layout algorithm

This section describes how a AnimatedFlex is rendered by the framework. See BoxConstraints for an introduction to box layout models.

Layout for a AnimatedFlex proceeds in six steps:

  1. Layout each child with 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 crossAxisAlignment is CrossAxisAlignment.stretch, instead use tight cross axis constraints that match the incoming max extent in the cross axis.
  2. 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.
  3. 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.fit properties that are FlexFit.tight are given tight constraints (i.e., forced to fill the allocated space), and children with Flexible.fit properties that are FlexFit.loose are given loose constraints (i.e., not forced to fill the allocated space).
  4. The cross axis extent of the AnimatedFlex is the maximum cross axis extent of the children (which will always satisfy the incoming constraints).
  5. The main axis extent of the AnimatedFlex is determined by the mainAxisSize property. If the mainAxisSize property is MainAxisSize.max, then the main axis extent of the AnimatedFlex is the max extent of the incoming main axis constraints. If the mainAxisSize property is MainAxisSize.min, then the main axis extent of the AnimatedFlex is the sum of the main axis extents of the children (subject to the incoming constraints).
  6. Determine the position for each child according to the mainAxisAlignment and the crossAxisAlignment. For example, if the mainAxisAlignment is MainAxisAlignment.spaceBetween, any main axis space that has not been allocated to children is divided evenly and placed between the children.

See also:

  • Row, for a version of this widget that is always horizontal.
  • Column, for a version of this widget that is always vertical.
  • Expanded, to indicate children that should take all the remaining room.
  • Flexible, to indicate children that should share the remaining room.
  • Spacer, a widget that takes up space proportional to its flex value. that may be sized smaller (leaving some remaining room unused).
  • Wrap, for a widget that allows its children to wrap over multiple runs.
  • The catalog of layout widgets.
Inheritance
Implementers

Constructors

AnimatedFlex.new({Key? key, required Axis direction, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, MainAxisSize mainAxisSize = MainAxisSize.max, CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, TextDirection? textDirection, VerticalDirection verticalDirection = VerticalDirection.down, TextBaseline? textBaseline, Clip clipBehavior = Clip.none, double spacing = 0.0, required List<Widget> children, Duration movementDuration = defaultMoveAnimationDuration, double sensitivity = 5.0, Duration? insertionDuration = defaultInsertionDuration, Duration? insertionDelay = defaultInsertionDelayDuration, Widget insertionBuilder(Widget child, Animation<double> controller)?, Duration? removalDuration = defaultRemovalDuration, Widget removalBuilder(Widget child, Animation<double> controller)?, Duration? staggeredInitialInsertionAnimation})
Creates a flex layout.
const

Properties

children → List<Widget>
The children to display.
final
clipBehavior → Clip
The content will be clipped (or not) according to this option.
final
crossAxisAlignment → CrossAxisAlignment
How the children should be placed along the cross axis.
final
direction → Axis
The direction to use as the main axis.
final
hashCode → int
The hash code for this object.
no setterinherited
insertionBuilder → Widget Function(Widget child, Animation<double> controller)?
final
insertionDelay → Duration?
final
insertionDuration → Duration?
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
mainAxisAlignment → MainAxisAlignment
How the children should be placed along the main axis.
final
mainAxisSize → MainAxisSize
How much space should be occupied in the main axis.
final
movementDuration → Duration
The duration over which to animate changes in child positions.
final
removalBuilder → Widget Function(Widget child, Animation<double> controller)?
final
removalDuration → Duration?
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
sensitivity → double
The minimum distance a child must move to trigger an animation.
final
spacing → double
How much space to place between children in the main axis.
final
staggeredInitialInsertionAnimation → Duration?
final
textBaseline → TextBaseline?
If aligning items according to their baseline, which baseline to use.
final
textDirection → TextDirection?
Determines the order to lay children out horizontally and how to interpret start and end in the horizontal direction.
final
verticalDirection → VerticalDirection
Determines the order to lay children out vertically and how to interpret start and end in the vertical direction.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<AnimatedFlex>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
getEffectiveTextDirection(BuildContext context) → TextDirection?
The value to pass to AnimatedRenderFlex.textDirection.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited

Static Methods

material3({Key? key, Axis direction = Axis.horizontal, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, MainAxisSize mainAxisSize = MainAxisSize.max, CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, VerticalDirection verticalDirection = VerticalDirection.down, TextDirection? textDirection, TextBaseline? textBaseline, Clip clipBehavior = Clip.none, double spacing = 0.0, Duration movementDuration = material3MoveAnimationDuration, double sensitivity = 5.0, Duration insertionDuration = material3InsertionDuration, Duration insertionDelay = material3InsertionDelayDuration, Widget insertionBuilder(Widget child, Animation<double> controller)?, Duration removalDuration = material3RemovalDuration, Widget removalBuilder(Widget child, Animation<double> controller)?, Duration? staggeredInitialInsertionAnimation, required List<Widget> children}) → AnimatedFlex