FlexBox class

A flexible box layout widget that implements the CSS Flexbox specification.

FlexBox provides a powerful and flexible way to arrange child widgets in one or two dimensions. It supports all major flexbox features including direction, wrapping, alignment, spacing, and responsive sizing.

Basic Usage

FlexBox(
  direction: FlexDirection.row,
  children: [
    FlexItem(child: Text('Item 1')),
    FlexItem(child: Text('Item 2')),
    FlexItem(child: Text('Item 3')),
  ],
)

Layout Direction

The direction property controls the primary axis of the layout:

• FlexDirection.row: Items flow horizontally (left to right)
• FlexDirection.column: Items flow vertically (top to bottom)
• FlexDirection.rowReverse: Items flow horizontally (right to left)
• FlexDirection.columnReverse: Items flow vertically (bottom to top)

Wrapping Behavior

The wrap property controls how items wrap to new lines:

• FlexWrap.none: Single line layout, items may overflow
• FlexWrap.wrap: Multi-line layout, items wrap to new lines
• FlexWrap.wrapReverse: Multi-line layout with reversed line order

Alignment and Justification

• justifyContent: Controls alignment along the main axis
• alignItems: Controls alignment along the cross axis for all items
• alignContent: Controls alignment of the entire flex container when wrapping

Spacing and Padding

• padding: Internal padding around the container
• rowGap: Space between items horizontally
• columnGap: Space between items vertically

Responsive Design

Use FlexItem widgets as children to control individual item sizing:

FlexBox(
  children: [
    FlexItem(flexGrow: 1, child: Text('Flexible')),
    FlexItem(width: SizeUnit.viewportSize * 0.3, child: Text('Fixed')),
  ],
)

Scrolling and Overflow

Control overflow behavior with horizontalOverflow and verticalOverflow:

• LayoutOverflow.hidden: Clip content that exceeds bounds
• LayoutOverflow.scroll: Add scrollbars when content exceeds bounds
• LayoutOverflow.visible: Allow content to extend beyond bounds

RTL Support

The layout automatically respects the textDirection and handles RTL languages correctly, reversing the flow direction when appropriate.

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatelessWidget
• FlexBox

Implementers

• ColumnBox
• RowBox

Available extensions

• WidgetExtension

Constructors

FlexBox({Key? key, FlexDirection direction = FlexDirection.row, FlexWrap wrap = FlexWrap.none, int? maxItemsPerLine, int? maxLines, EdgeSpacingGeometry padding = EdgeSpacing.zero, SpacingUnit rowGap = SpacingUnit.zero, SpacingUnit columnGap = SpacingUnit.zero, BoxAlignmentGeometry alignItems = BoxAlignmentGeometry.start, BoxAlignmentContent alignContent = BoxAlignmentContent.start, BoxAlignmentBase justifyContent = BoxAlignmentBase.start, TextDirection? textDirection, bool reversePaint = false, ScrollController? verticalController, ScrollController? horizontalController, DiagonalDragBehavior diagonalDragBehavior = DiagonalDragBehavior.free, LayoutOverflow horizontalOverflow = LayoutOverflow.hidden, LayoutOverflow verticalOverflow = LayoutOverflow.hidden, TextBaseline? textBaseline, Clip clipBehavior = Clip.hardEdge, BorderRadiusGeometry? borderRadius, List<Widget> children = const []})

Creates a flexible box layout container with the specified properties.

const

Properties

alignContent → BoxAlignmentContent

The alignment of the flex container's lines when wrapping is enabled.

final

alignItems → BoxAlignmentGeometry

The default cross-axis alignment for all child items.

final

asAbsoluteItem → Widget

Available on Widget, provided by the WidgetExtension extension

Explicitly wraps this widget as an AbsoluteItem.

no setter

asFlexItem → Widget

Available on Widget, provided by the WidgetExtension extension

Explicitly wraps this widget as a FlexItem.

no setter

borderRadius → BorderRadiusGeometry?

The border radius applied to the container's background and clipping.

final

children → List<Widget>

The list of child widgets to layout.

final

clipBehavior → Clip

How to clip the content when it overflows the bounds.

final

columnGap → SpacingUnit

The vertical spacing between adjacent flex items.

final

diagonalDragBehavior → DiagonalDragBehavior

Controls how diagonal drag gestures are interpreted.

final

direction → FlexDirection

The direction of the main axis for this flex container.

final

hashCode → int

The hash code for this object.

no setter, inherited

horizontalController → ScrollController?

Controller for horizontal scrolling when horizontal overflow is enabled.

final

horizontalOverflow → LayoutOverflow

How to handle content that exceeds the horizontal bounds.

final

justifyContent → BoxAlignmentBase

The main-axis alignment for all child items.

final

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

maxItemsPerLine → int?

The maximum number of items allowed per line when wrapping is enabled.

final

maxLines → int?

The maximum number of lines allowed when wrapping is enabled.

final

padding → EdgeSpacingGeometry

The internal padding applied to the flex container.

final

reversePaint → bool

Whether to reverse the paint order of children.

final

rowGap → SpacingUnit

The horizontal spacing between adjacent flex items.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

textBaseline → TextBaseline?

The text baseline to use for aligning text within the layout.

final

textDirection → TextDirection?

The text direction for resolving directional properties.

final

verticalController → ScrollController?

Controller for vertical scrolling when vertical overflow is enabled.

final

verticalOverflow → LayoutOverflow

How to handle content that exceeds the vertical bounds.

final

wrap → FlexWrap

Controls how flex items wrap when they exceed the container's size.

final

Methods

aspectRatio(double aspectRatio, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the aspect ratio constraint for this widget.

bottom(PositionUnit bottom, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the distance from the bottom edge of the parent container.

build(BuildContext context) → Widget

Builds the widget tree for this flex container.

override

constrained({SizeUnit? minWidth, SizeUnit? maxWidth, SizeUnit? minHeight, SizeUnit? maxHeight, Key? key}) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets comprehensive size constraints including both minimum and maximum bounds.

createElement() → StatelessElement

Creates a StatelessElement to manage this widget's location in the tree.

inherited

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.

override

flexGrow(double flexGrow, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the flex grow factor for this widget within a flex container.

flexShrink(double flexShrink, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the flex shrink factor for this widget within a flex container.

height(SizeUnit height, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the height of this widget using a SizeUnit.

id(Object valueKey) → Widget

Available on Widget, provided by the WidgetExtension extension

Assigns a ValueKey to this widget using the provided value.

key(Key key) → Widget

Available on Widget, provided by the WidgetExtension extension

Assigns a Key to this widget.

left(PositionUnit left, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the distance from the left edge of the parent container.

maxHeight(SizeUnit maxHeight, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the maximum height constraint for this widget using a SizeUnit.

maxSized({SizeUnit? maxWidth, SizeUnit? maxHeight, Key? key}) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets maximum width and height constraints simultaneously.

maxWidth(SizeUnit maxWidth, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the maximum width constraint for this widget using a SizeUnit.

minHeight(SizeUnit minHeight, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the minimum height constraint for this widget using a SizeUnit.

minSized({SizeUnit? minWidth, SizeUnit? minHeight, Key? key}) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets minimum width and height constraints simultaneously.

minWidth(SizeUnit minWidth, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the minimum width constraint for this widget using a SizeUnit.

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

paintOrder(int paintOrder, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the paint order for this widget within its parent container.

position(PositionType position, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the position type for this widget to control positioning context.

positioned({PositionUnit? top, PositionUnit? left, PositionUnit? bottom, PositionUnit? right, Key? key}) → Widget

Available on Widget, provided by the WidgetExtension extension

Positions the widget using multiple edge offsets simultaneously.

right(PositionUnit right, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the distance from the right edge of the parent container.

selfAligned(BoxAlignmentGeometry alignSelf, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the alignment of this widget within its parent flex container.

sized({SizeUnit? width, SizeUnit? height, Key? key}) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets both width and height dimensions simultaneously.

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode

Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.

inherited

top(PositionUnit top, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the distance from the top edge of the parent container.

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

width(SizeUnit width, [Key? key]) → Widget

Available on Widget, provided by the WidgetExtension extension

Sets the width of this widget using a SizeUnit.

Operators

operator ==(Object other) → bool

The equality operator.

inherited