FlutterFlow Docs
Search…
Columns
The Column widget is used to create a vertical layout. It is one of the most used widgets.
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.

Customizing

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

Add Padding

​Here are the instructions on how to add padding.

Adjust The Alignment

​Here are the instructions on adjusting the alignment.

Changing Main Axis Size

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:
  1. 1.
    Minimum(
    ): Make column occupy the minimum amount of size on the main axis. This option makes column size equal to the total size of children inside.
  2. 2.
    Maximum(
    ): Make column occupy the maximum amount of size on the main axis. This option fills all the available space on the main axis.
To change the main axis size:
  • Select the Column from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to Main Axis Size.
  • Select either Minimum(
    ) or Maximum(
    ) option based on your requirement.
Minimum
Maximum

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:
  1. 1.
    Start (
    ): Place children elements as close to the beginning as possible.
  2. 2.
    Center (
    ): Place children elements as close to the middle as possible.
  3. 3.
    End (
    ): Place children elements as close to the end as possible.
  4. 4.
    Space Evenly (
    ): Evenly space children elements.
  5. 5.
    Space Around (
    ): Place the free space evenly between the children with some extra space at the beginning and end.
  6. 6.
    Space Between (
    ): Place the free space evenly between the children.
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.
The default Main Axis Alignment set to the Column is Start.

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:
  1. 1.
    Start (
    ): Place children elements as close to the beginning as possible.
  2. 2.
    Center (
    ): Place children elements as close to the middle as possible.
  3. 3.
    End (
    ): Place children elements as close to the end as possible.
  4. 4.
    Stretch (
    ): Make children fill the cross axis (horizontally).
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.
The default Cross Axis Alignment set to the Column is Center.

Aligning 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:
  1. 1.
    Expanded (
    ): This option expands the widget to fill the available space of the main axis. For a column, this will be the vertical axis.
  2. 2.
    Flex (
    ): This option is only available when there are multiple widgets inside of the column that is expanded. This option determines 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.
  • 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 align widgets inside of column:
  • Select the widget and then select the right icon(
    ) under Expanded.
  • Similarly, set other widgets to Expanded. Now you will see the Flex property.
  • Try adding Flex properties for the expanded widgets (e.g. Widget A Flex = 1 and Widget B Flex = 2).

Make The Column Scrollable

To make a column scrollable when there are a large number of children, just check the Scrollable box.
Scrollable Column

Showing Backend Data

Sometimes you may need to show a list of items from your backend. There are main two sources from where you can get the data.
Backend Queries on a Column can cause performance issues if the number of items is >15. In that case, we recommend using a ListView or GridView instead.

1. Showing Data from Firestore

You may be using the Firstore to store your app data in the collection-document model. Let's see how you can display the items from the Firestore collection into the Column.

1.1 Prerequisites

Before we fetch data from Firestore, make sure you incorporate all the mentioned prerequisites to have some data in Firestore.
Your pictures collection with the URL of some images should look like the following:

1.2 Querying a Collection on a Column

Querying a collection allows you to get a list of documents from inside the collection and show them in the Column.
To query a collection on a Column:
  • Select the Column widget from the widget tree or from the canvas area.
  • Click on the Backend Query tab (on the right side of your screen).
  • Set the Query Type to Query Collection.
  • Scroll down to find the Collection dropdown and change it to your collection.
  • Set the Query Type to List of Documents.
  • Click Save.

1.3 Showing Data in UI Elements

To show an image from the URL stored in your Firestore document:
  • Select the Image Widget from the widget tree or from the canvas area.
  • Move to property editor and scroll down to the path property.
  • Click on the Set from Variable text. (This will open a new panel)
    • Find the Source dropdown, click on unset and select the [collection] Record (from Column).
    • Under the Available Options, click on Unset and select the field that holds the image URL path.
    • Click Save.
Here's how it looks when you run your app:

2. Showing Data from API call

You may be using your own infrastructure to store your app data. The data can be retrieved via API calls.

2.1 Prerequisites

Before we show data from an API call, make sure you incorporate all the mentioned prerequisites.
If you haven't set up API calls at your backend side yet, you can use any open API for trying it out. Maybe you can try this https://picsum.photos/v2/list​
After adding an API call in FlutterFlow, it looks like this:

2.2 Making API call on a Column

Making an API call allows you to get a response (containing the list of items) and show them in the Column.
To make an API call on a Column:
  • Select the Column widget from the widget tree or from the canvas area.
  • Click on the Backend Query tab (on the right side of your screen).
  • Set the Query Type to API Call.
  • Set the Call Name to the API Name that fetches the data.
  • Click Save.

2.3 Generating Dynamic Children

Generating dynamic children help you prepare a list of items present in the API response. The returned result is stored in a variable which you can use to populate the Column.
To generate dynamic children:
  • Select Column from the widget tree or from the canvas area.
  • Click on the Generate Dynamic Children tab (on the right side of your screen).
  • Enter the appropriate Variable Name.
  • Set the Source value to the [apicall_name] Response (from Column).
  • Set the Response Options to JSON Body.
  • Under the Available Options, click on Unset and select the JSON Path.
  • Inside the JSON Path, enter the JSON expression to retrieve the list. See how to get JSON Path here.
  • Click Save.

2.4 Showing Data in UI Elements

To show an image from the URL stored inside the variable.
  • Select the Image Widget from the widget tree or from the canvas area.
  • Move to property editor and scroll down to the path property.
  • Click on the Set from Variable text. (This will open a new panel)
    • Find the Source dropdown, click on unset and select the [variable_name] Item (Json).
    • Under the Available Options, click on Unset and select the JSON Path.
    • Inside the JSON Path, enter the JSON expression to retrieve the list. See how to get JSON Path here.
    • Click Save.
Here's how it looks when you run your app:

Show/Hide Column

Please find the instructions to show/hide the widget here.
Last modified 3mo ago