FlutterFlow Docs
Search…
Columns
The Column widget is one of the most used widgets and is essential in creating a vertical layout for any UI. Here’s how the column arranges its children:
As shown in the figure above, the Main Axis and the Cross Axis are two important properties of the column. For a column, the Main Axis runs vertically and the Cross Axis runs horizontally. By default, all the children inside of the column will be arranged in a vertical fashion.

Add A Column To Your Project

To add a column widget in your project:
    Drag the column widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
    Next, add a few Image widgets from the Base Element section.

Changing the properties

The Properties Panel can be used to customize the behavior of your column widget.

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.
To change the Main Axis Alignment:
    Select the Column from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to Main Axis Alignment.
    Select from the options displayed including Start, Center, End, Space evenly, Space between, and Space around.
Main Axis Alignment

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.
To change the Cross Axis Alignment:
    Select the Column from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to Cross Axis Alignment.
    Select from the options displayed including Start, Center, End, Stretch.
Cross Axis Alignment

Updating The Alignment Of The Column

Horizontal Alignment determines where the widget is placed horizontally inside of its parent. You can adjust this by using the slider or entering a value. A value of -1 will place the widget all the way to the left, while a value of 1 will place the widget all the way to the right.
Vertical Alignment determines where the widget is placed vertically inside of a parent. You can adjust this by using the slider or entering a value. A value of -1 will place the widget all the way to the top, while a value of 1 will place the widget all the way to the bottom.
​

Updating The Alignment Of The Widgets Inside Of Column

You can set the horizontal and vertical alignment of widgets inside of the column. Additionally, there are two more alignment options for widgets inside of a parent widget:
Expanded will expand the widget to fill the available space of the main axis. For a column this will be the vertical axis.
When using an expanded widget, make sure to limit the height of the column. Using an unbounded column and expanded widget will break your application. Please note: scrollable columns are unbounded, so they should not be used in combination with expanded widgets.
To expand a widget:
    Select the widget and then select the right icon under Expanded.
Expanded Widget
If there are multiple widgets inside of the column that are expanded, Flex will determine the proportion of space given to each widget. For example, if Widget A has Flex = 1 and Widget B has Flex = 2, then A will take up 1/3 of the available space and B will take up 2/3 of the space.

Make The Column Scrollable

To make a column scrollable when there are a large number of children, just check the Scrollable box.
Scrollable Column
​
Last modified 1mo ago