FlexLayout class

A layout algorithm implementing the CSS Flexbox specification.

FlexLayout provides a complete implementation of the flexbox layout model, supporting all major flexbox features including direction, wrapping, alignment, spacing, and flexible sizing. It follows the CSS Flexbox specification closely while being optimized for Flutter's layout system.

Key Features

  • Direction: Row, column, and reverse variants
  • Wrapping: Single line or multi-line with wrap/nowrap options
  • Alignment: Main-axis (justify-content), cross-axis (align-items), and line alignment (align-content)
  • Flexible Sizing: Flex grow and shrink with basis sizing
  • Spacing: Configurable gaps between items and padding
  • RTL Support: Automatic handling of right-to-left text directions

Usage

FlexLayout is typically used through FlexBox widget, but can be used directly with LayoutBox for custom implementations:

LayoutBoxWidget(
  layout: FlexLayout(
    direction: FlexDirection.row,
    wrap: FlexWrap.wrap,
    alignItems: BoxAlignment.center,
    justifyContent: BoxAlignment.spaceBetween,
  ),
  children: [/* flex items */],
)
Inheritance

Constructors

FlexLayout.new({FlexDirection direction = FlexDirection.row, FlexWrap wrap = FlexWrap.none, EdgeSpacing padding = EdgeSpacing.zero, SpacingUnit rowGap = SpacingUnit.zero, SpacingUnit columnGap = SpacingUnit.zero, int? maxItemsPerLine, int? maxLines, BoxAlignmentGeometry alignItems = BoxAlignment.start, BoxAlignmentContent alignContent = BoxAlignment.start, BoxAlignmentBase justifyContent = BoxAlignment.start})
Creates a flex layout with the specified configuration.
const

Properties

alignContent BoxAlignmentContent
The cross-axis alignment for flex lines when wrapping is enabled.
final
alignItems BoxAlignmentGeometry
The default cross-axis alignment for all items.
final
columnGap SpacingUnit
The vertical spacing between adjacent flex items.
final
direction FlexDirection
The direction of the main axis for this flex layout.
final
hashCode int
The hash code for this object.
no setterinherited
justifyContent BoxAlignmentBase
The main-axis alignment for items within each flex line.
final
mainAxis LayoutAxis
no setteroverride
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 EdgeSpacing
The padding applied inside the flex container.
final
rowGap SpacingUnit
The horizontal spacing between adjacent flex items.
final
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
wrap FlexWrap
Controls how flex items wrap when they exceed the container's size.
final

Methods

createLayoutHandle(ParentLayout parent) LayoutHandle<Layout>
Creates a layout handle for performing flex layout operations.
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() String
A string representation of this object.
inherited

Operators

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