Column

The Column widget is a layout container that stacks its child widgets vertically.

Definition and role

The Column widget arranges the children it holds top to bottom in a single column. Set how children align vertically and horizontally and how much space sits between them, and use the scroll anchor feature to scroll to a specific child.

• Category: Layouts

Features

Feature	Description
Vertical layout	Stacks child widgets top to bottom in a single column.
Alignment	Set the vertical (main axis) and horizontal (cross axis) alignment.
Scroll anchor	Turn on scrollAnchor to scroll to a specific child from a script.

How to use

1. Open the Layouts category in the left widget palette.
2. Drag and drop the Column item onto the canvas.
3. Place child widgets inside the Column.
4. Adjust the alignment and spacing with mainAxisAlignment, crossAxisAlignment, and spacing.

Properties

Property	Description	Default	Value / Type
mainAxisSize	How much vertical space the widget takes up	max	min, max
mainAxisAlignment	Vertical (main axis) alignment	start	start, end, center, spaceBetween, spaceAround, spaceEvenly
crossAxisAlignment	Horizontal (cross axis) alignment	center	start, end, center, stretch, baseline
spacing	Gap between children	0	Number
textDirection	Horizontal layout direction	Not set	rtl, ltr
verticalDirection	Vertical reference direction	down	up, down
textBaseline	Baseline used for alignment	Not set	alphabetic, ideographic
clipBehavior	How overflow is clipped	none	none, hardEdge, antiAlias, antiAliasWithSaveLayer
scrollAnchor	Use the scroll anchor feature (for the scrollToAnchor script method)	Off (false)	true / false

Notes and tips

tip

To scroll to a specific position from a script, turn on scrollAnchor, give the child an id, then call scrollToAnchor(id).

Learn more

tip

For the Widget Control you can use to drive this widget from a script, visit Column Widget Control.