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

Implementers

Constructors

FlexBox.new({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
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 setterinherited
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.
finalinherited
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 setterinherited
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

build(BuildContext context) → Widget: Builds the widget tree for this flex container.
override
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.
inherited
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