Row
The Row widget is a layout container that places its child widgets side by side horizontally.
Definition and role
The Row widget lays out the children it holds in a single line, from left to right. Set how those children align horizontally and vertically, and how much space sits between them.
- Category: Layouts
Features
| Feature | Description |
|---|---|
| Horizontal layout | Lines up child widgets in a single row, from left to right. |
| Alignment | Sets the horizontal (main axis) and vertical (cross axis) alignment. |
| Spacing | Sets the spacing between children. |
How to use
- Open the Layouts category in the left widget palette.
- Drag and drop the Row item onto the canvas.
- Place child widgets inside the Row.
- Adjust alignment and spacing with properties such as
mainAxisAlignment,crossAxisAlignment, andspacing.
Properties
| Property | Description | Default | Value / Type |
|---|---|---|---|
mainAxisSize | How the Row takes up horizontal space | max | min, max |
mainAxisAlignment | Horizontal (main axis) alignment | start | start, end, center, spaceBetween, spaceAround, spaceEvenly |
crossAxisAlignment | Vertical (cross axis) alignment | center | start, end, center, stretch, baseline |
spacing | Spacing between children | 0 | Number |
textDirection | Direction of the horizontal layout | Not set | rtl, ltr |
verticalDirection | Reference direction on the vertical axis | down | up, down |
textBaseline | Baseline used for baseline alignment | Not set | alphabetic, ideographic |
clipBehavior | How overflowing content is clipped | none | none, hardEdge, antiAlias, antiAliasWithSaveLayer |
Notes and tips
tip
To stretch a child into the leftover space, apply a Flexible or Expanded setting to that child. To fill the Row vertically, set crossAxisAlignment to stretch.
Learn more
tip
For the Widget Control you can use to script this widget, see Row Widget Control.