Column

The Column widget arranges its child widgets vertically. It's commonly used to display multiple widgets, one below the other. For example, you might use this widget to show text, an image, and a button placed vertically in your app:

Here’s how the column arranges its children:

To add a Column widget:

Open the Widget Palette and locate the Column widget under the Layout Elements tab. You can drag it into your desired location or add it directly from the widget tree.
Add a few widgets inside the Column. You'll see them neatly lined up in a vertical arrangement.

Customizing

You can customize the appearance and behavior of this widget using the various properties available under the properties panel.

Changing Main Axis Size

For a Column, the Main Axis runs vertically, and the Cross Axis runs horizontally. By default, all the children inside the column will be arranged in a vertical fashion.

The Main Axis Size defines how much space a Column should occupy in the main axis (i.e., vertical direction).

You can set the main axis size using the following two options:

Minimum(): Make the column occupy the minimum amount of size on the main axis. This option makes column size equal to the total size of children inside.
Maximum(): Make the column occupy the maximum size on the main axis. This option fills all the available space on the main axis.

To change the main axis size, move to the Properties Panel > Column Properties > select either Minimum() or Maximum() option based on your requirements.

Adjust the Main Axis Alignment

The Main Axis for a Column widget is the vertical axis, so adjusting this will change how the child widgets are vertically distributed in the column.

You can adjust the main axis alignment using the following options:

Start: Aligns children at the top of the column.
Center: Centers children within the column.
End: Aligns children at the bottom of the column.
Space Evenly: Distributes children evenly, with equal spacing throughout.
Space Around: Place the free space evenly between the children with some extra space at the beginning and end.
Space Between: Evenly spaces children, but without extra space at the ends.

To change the Main Axis Alignment, move to the Properties Panel > Column Properties > Main Axis Alignment > select the preferred alignment option.

Adjust the Cross Axis Alignment

The Cross Axis for a Column Widget is the horizontal axis, so adjusting this will change how the child widgets are horizontally distributed in the column.

You can adjust the cross axis alignment using the following options:

Start: Place child elements as close to the beginning as possible.
Center: Place child elements as close to the middle as possible.
End: Place child elements as close to the end as possible.
Stretch: Expands each child to fill the column's width.

To change the Cross Axis Alignment, move to the Properties Panel > Column Properties > Cross Axis Alignment > select the preferred alignment option.

Sizing widgets inside the Column

See how to size widgets inside the Column.

Making column scrollable

When the total height of the children in a Column exceeds the available screen space, making the Column scrollable prevents content from being cut off or rendered inaccessible.

To make a Column scrollable, move to the Properties Panel > Column Properties > Scrollable > select the option.

See how to display an empty list widget when there is no data.