ColumnBox constructor

const ColumnBox({
  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 vertical flex layout container.

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

The reverse parameter controls the flow direction:

  • false (default): Items flow top to bottom
  • true: Items flow bottom to top

Example

ColumnBox(
  wrap: FlexWrap.wrap,
  alignItems: BoxAlignmentGeometry.stretch,
  padding: EdgeSpacing.all(SpacingUnit.fixed(16)),
  children: [
    FlexItem(height: SizeUnit.fixed(50), child: Text('Fixed Height')),
    FlexItem(flexGrow: 1, child: Text('Flexible')),
  ],
)

Reverse Example

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

Implementation

const ColumnBox({
  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.columnReverse
           : FlexDirection.column,
     );