ColumnBox class
A convenience widget for creating vertical flex layouts.
ColumnBox is a specialized version of FlexBox that automatically sets the direction to FlexDirection.column, creating a vertical layout where children flow from top to bottom.
This widget provides all the same flexbox features as FlexBox but with a simpler API for the common case of vertical layouts.
Example
ColumnBox(
alignItems: BoxAlignmentGeometry.center,
justifyContent: BoxAlignmentBase.spaceEvenly,
verticalSpacing: SpacingUnit.fixed(12),
children: [
FlexItem(child: Text('Top')),
FlexItem(child: Text('Middle')),
FlexItem(child: Text('Bottom')),
],
)
Reverse Direction
Use the reverse parameter or ColumnBox.reverse constructor for reverse flow:
ColumnBox(
reverse: true, // or use ColumnBox.reverse()
children: [/* items flow bottom to top */],
)
Equivalent to
FlexBox(
direction: FlexDirection.column,
// ... other properties
children: children,
)
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatelessWidget
- FlexBox
- ColumnBox
Constructors
-
ColumnBox.new({Key? key, 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 [], bool reverse = false}) -
Creates a vertical flex layout container.
const
-
ColumnBox.reverse({Key? key, 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 vertical flex layout container with reverse flow direction.
const
Properties
- alignContent → BoxAlignmentContent
-
The alignment of the flex container's lines when wrapping is enabled.
finalinherited
- alignItems → BoxAlignmentGeometry
-
The default cross-axis alignment for all child items.
finalinherited
- borderRadius → BorderRadiusGeometry?
-
The border radius applied to the container's background and clipping.
finalinherited
-
children
→ List<
Widget> -
The list of child widgets to layout.
finalinherited
- clipBehavior → Clip
-
How to clip the content when it overflows the bounds.
finalinherited
- columnGap → SpacingUnit
-
The vertical spacing between adjacent flex items.
finalinherited
- diagonalDragBehavior → DiagonalDragBehavior
-
Controls how diagonal drag gestures are interpreted.
finalinherited
- direction → FlexDirection
-
The direction of the main axis for this flex container.
finalinherited
- hashCode → int
-
The hash code for this object.
no setterinherited
- horizontalController → ScrollController?
-
Controller for horizontal scrolling when horizontal overflow is enabled.
finalinherited
- horizontalOverflow → LayoutOverflow
-
How to handle content that exceeds the horizontal bounds.
finalinherited
- justifyContent → BoxAlignmentBase
-
The main-axis alignment for all child items.
finalinherited
- 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.
finalinherited
- maxLines → int?
-
The maximum number of lines allowed when wrapping is enabled.
finalinherited
- padding → EdgeSpacingGeometry
-
The internal padding applied to the flex container.
finalinherited
- reversePaint → bool
-
Whether to reverse the paint order of children.
finalinherited
- rowGap → SpacingUnit
-
The horizontal spacing between adjacent flex items.
finalinherited
- 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.
finalinherited
- textDirection → TextDirection?
-
The text direction for resolving directional properties.
finalinherited
- verticalController → ScrollController?
-
Controller for vertical scrolling when vertical overflow is enabled.
finalinherited
- verticalOverflow → LayoutOverflow
-
How to handle content that exceeds the vertical bounds.
finalinherited
- wrap → FlexWrap
-
Controls how flex items wrap when they exceed the container's size.
finalinherited
Methods
-
build(
BuildContext context) → Widget -
Builds the widget tree for this flex container.
inherited
-
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