FlutterFlow Docs
Search…
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:
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 of the Row will be arranged in a horizontal fashion.

Add A Row To Your Project

To add a Row widget in your project:
    Drag the Row 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 Row widget.

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.
To change the Main Axis Alignment:
    Select the Row 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.

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.
To change the Cross Axis Alignment:
    Select the Row 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.

Updating The Alignment Of The Row

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 Row

You can set the horizontal and vertical alignment of widgets inside of the Row. 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 the Row, this will be the horizontal axis.
When using an expanded widget, make sure to limit the width of the Row. Using an unbounded row and expanded widget will break your application. Please note: scrollable row 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.
If there are multiple widgets inside of the Row 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 Row Scrollable

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