Comment on page

Row

The Row widget is used to create a horizontal layout. It is one of the most used widgets. 
Here’s how the Row arranges its children:
Row
As shown in the figure above, the Main Axis and the Cross Axis are two important properties of the Row. For a Row, the Main Axis runs horizontally, and the Cross Axis runs vertically. By default, all the children inside the Row will be arranged in a horizontal fashion. 
Add Row widget
To add a Row widget in your project:
1.Drag the Row widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
2.Next, add a few Image widgets from the Base Element section.
Customizing
The Properties Panel can be used to customize the behavior of your Row widget.
Add Padding
​Here are the instructions on how to add padding.
Adjust The Alignment
​Here are the instructions for adjusting the alignment.
Changing Main Axis Size
The Main Axis Size defines how much space a Row should occupy in the main axis (i.e., horizontal direction).
You can set the main axis size using the following two options:
Minimum(
): Make Row occupy the minimum amount of size on the main axis. This option makes Row size equal to the total size of children inside.
Maximum(
): Make Row 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:
1.Select the Row from the widget tree or the canvas area. 
2.Move to the Property Editor and scroll down to Main Axis Size.
3.Select either Minimum(
) or Maximum(
) option based on your requirement.
Minimum
Maximum
Adjust the Main Axis Alignment
The Main Axis for a Row Widget is the horizontal axis, so adjusting this will change how the child widgets are horizontally distributed in the Row.
You can adjust the main axis alignment using the following options:
Start (
): Place children elements as close to the beginning as possible.
Center (
): Place children elements as close to the middle as possible.
End (
): Place children elements as close to the end as possible.
Space Evenly (
): Evenly space children elements.
Space Around (
): Place the free space evenly between the children with some extra space at the beginning and end.
Space Between (
): Place the free space evenly between the children.
To change the Main Axis Alignment:
1.Select the Row from the widget tree or from the canvas area. 
2.Move to the Property Editor and scroll down to Main Axis Alignment. 
3.Select from the options displayed including Start, Center, End, Space evenly, Space between, and Space around. 
The default Main Axis Alignment set to the Row is Start.
Adjust the Cross Axis Alignment
The Cross Axis for a Row Widget is the vertical axis, so adjusting this will change how the child widgets are vertically distributed in the Row.
You can adjust the cross axis alignment using the following options:
Start (
): Place children elements as close to the beginning as possible.
Center (
): Place children elements as close to the middle as possible.
End (
): Place children elements as close to the end as possible.
Stretch (
): Make children fill the cross axis (vertically).
To change the Cross Axis Alignment:
1.Select the Row from the widget tree or the canvas area.
2.Move to the Property Editor and scroll down to Cross Axis Alignment. 
3.Select from the options displayed, including Start, Center, End, and Stretch.
The default Cross Axis Alignment set to the Row is Center.
Sizing widgets inside the Row
See how to size widgets inside the Row.
Make row scrollable
To make a Row scrollable when there are many children, check the Scrollable box.
Showing empty list widget
See how to display an empty list widget when there is no data.
Add item spacing
See how to add space between items here.
Primary property
See how to use the primary property here.
Showing backend data
You might be storing data on Firebase or your own server. Let's see how to load items and display them on the Column widget.
1.​Showing Data from Firestore​
2.​Showing Data from API call​
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
To show data from Firestore, create a collection, query a collection and then display the data.
Pictures collection
Showing pictures from Firestore
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.
Be familiar with API calls.​
​Add API calls inside the FlutterFlow project.
If you haven't set up API calls at your backend side yet, you can use any open API to try 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 Row
Making an API call allows you to get a response (containing the list of items) and show them in the Row.
To make an API call on a Row:
1.Select the Row widget from the widget tree or the canvas area.
2.Click on the Backend Query tab (on the right side of your screen).
3.Set the Query Type to API Call.
4.Set the Call Name to the API Name that fetches the data.
5.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 that you can use to populate the Row. 
To generate dynamic children:
1.Select Row from the widget tree or the canvas area.
2.Click on the Generate Dynamic Children tab (on the right side of your screen).
3.Enter the appropriate Variable Name.
4.Set the Source value to the [apicall_name] Response (from Row).
5.Set the Response Options to JSON Body.
6.Under the Available Options, click on Unset and select the JSON Path.
7.Inside the JSON Path, enter the JSON expression to retrieve the list. See how to get JSON Path here.
8.Click Save.
2.4 Showing Data in UI Elements
To show an image from the URL stored inside the JSON key:
1.Select the Image widget, move to the properties panel, find the Path property and click on the Set from Variable text.
2.Select the [variable_name] item from the list. This should be the variable name you specified while Generating Children from Variable.
3.Set the Available Options to JSON Path.
4.Inside the JSON Path, enter the JSON expression to retrieve the image URL. See how to get JSON Path here. 
5.Click Confirm.
Showing Data in UI Elements
Here's how it looks when you run your app:
Video guide
If you prefer watching a video tutorial, here's the one for you:

Container

Column

Last modified 2mo ago