Row

The Row widget arranges its child widgets horizontally. It's commonly used to display multiple widgets, one after another. For instance, if you want to display a text label and an icon side by side, you can use this widget.

Here’s how the Row arranges its children:

To add a Row widget:

Open the Widget Palette and locate the Row 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 Row. You'll see them neatly lined up in a horizontal 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 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.

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 the 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 the Row 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 > Row Properties > select either Minimum() or Maximum() option based on your requirements.

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: Aligns children to the start of the row.
Center: Centers children horizontally within the row.
End: Aligns children to the end of the row.
Space Evenly: Distributes children evenly across the row, with equal spacing between them.
Space Around: Spaces children evenly, but also adds extra space before the first and after the last child.
Space Between: Evenly spaces children across the row, without extra space at the start or end.

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

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: Aligns child elements to the top of the row.
Center: Centers child elements vertically within the row.
End: Aligns child elements to the bottom of the row.
Stretch: Stretches each child to fill the height of the row.

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

Sizing widgets inside the Row

See how to size widgets inside the Row.

Make row scrollable

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

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

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