RowBox constructor

const RowBox({
  1. Key? key,
  2. FlexWrap wrap = FlexWrap.none,
  3. int? maxItemsPerLine,
  4. int? maxLines,
  5. EdgeSpacingGeometry padding = EdgeSpacing.zero,
  6. SpacingUnit rowGap = SpacingUnit.zero,
  7. SpacingUnit columnGap = SpacingUnit.zero,
  8. BoxAlignmentGeometry alignItems = BoxAlignmentGeometry.start,
  9. BoxAlignmentContent alignContent = BoxAlignmentContent.start,
  10. BoxAlignmentBase justifyContent = BoxAlignmentBase.start,
  11. TextDirection? textDirection,
  12. bool reversePaint = false,
  13. ScrollController? verticalController,
  14. ScrollController? horizontalController,
  15. DiagonalDragBehavior diagonalDragBehavior = DiagonalDragBehavior.free,
  16. LayoutOverflow horizontalOverflow = LayoutOverflow.hidden,
  17. LayoutOverflow verticalOverflow = LayoutOverflow.hidden,
  18. TextBaseline? textBaseline,
  19. Clip clipBehavior = Clip.hardEdge,
  20. BorderRadiusGeometry? borderRadius,
  21. List<Widget> children = const [],
  22. bool reverse = false,
})

Creates a horizontal flex layout container.

All parameters are the same as FlexBox except direction which is automatically set to FlexDirection.row. Use this widget when you want children to flow horizontally.

The reverse parameter controls the flow direction:

  • false (default): Items flow left to right (right to left in RTL)
  • true: Items flow right to left (left to right in RTL)

Example

RowBox(
  wrap: FlexWrap.wrap,
  alignItems: BoxAlignmentGeometry.center,
  padding: EdgeSpacing.all(SpacingUnit.fixed(16)),
  children: [
    FlexItem(flexGrow: 1, child: Text('Flexible')),
    FlexItem(width: SizeUnit.fixed(100), child: Text('Fixed')),
  ],
)

Reverse Example

RowBox(
  reverse: true,
  justifyContent: BoxAlignmentBase.end,
  children: [/* items in reverse order */],
)

Implementation

const RowBox({
  super.key,
  super.wrap,
  super.maxItemsPerLine,
  super.maxLines,
  super.padding,
  super.rowGap,
  super.columnGap,
  super.alignItems,
  super.alignContent,
  super.justifyContent,
  super.textDirection,
  super.reversePaint,
  super.verticalController,
  super.horizontalController,
  super.diagonalDragBehavior,
  super.horizontalOverflow,
  super.verticalOverflow,
  super.textBaseline,
  super.clipBehavior,
  super.borderRadius,
  super.children = const [],
  bool reverse = false,
}) : super(direction: reverse ? FlexDirection.rowReverse : FlexDirection.row);