Wrap
The Wrap widget is a layout container that lays children out in one direction and automatically moves them to the next line — a row or a column — when space runs out.
Use it for items whose count varies, such as buttons, tags, and chips, so they flow naturally within the available width.
Definition and role
The Wrap widget arranges children along the direction you set (direction), then wraps to the next line as soon as they no longer fit in the remaining space. Unlike Row and Column, it never clips or pushes out an overflowing child — it flows the child onto the next line instead. Set the spacing between items (spacing), the spacing between lines (runSpacing), and the alignment independently.
- Category: Layouts
- Default layout direction: horizontal (
horizontal) - Default item spacing and line spacing:
0
Features
| Feature | Description |
|---|---|
| Automatic wrapping | Lays children out along the layout direction, then moves them to the next line (row or column) when space runs out. |
| Layout direction | Use direction to choose a horizontal flow, where lines stack downward, or a vertical flow, where lines stack sideways. |
| Spacing | Set the spacing between items (spacing) and the spacing between lines (runSpacing) separately. |
| Alignment | Adjust the alignment inside a line (alignment), the alignment of the lines themselves (runAlignment), and the cross-axis alignment (crossAxisAlignment) independently. |
How to use
- Open the Layouts category in the left widget palette.
- Drag and drop the Wrap item onto the canvas.
- Add the child widgets you want to lay out inside the Wrap.
- In the properties panel on the right, set the layout direction with
directionand the spacing withspacingandrunSpacing. - If needed, fine-tune the alignment with
alignment,runAlignment, andcrossAxisAlignment.
Properties
| Property | Description | Default | Value / Type |
|---|---|---|---|
direction | Main direction children are laid out in | horizontal | horizontal, vertical |
alignment | Main-axis alignment inside a single line | start | start, end, center, spaceBetween, spaceAround, spaceEvenly |
spacing | Spacing between items on the same line | 0 | Number |
runAlignment | Aligns the lines (runs) along the cross axis | start | start, end, center, spaceBetween, spaceAround, spaceEvenly |
runSpacing | Spacing between one line and the next | 0 | Number |
crossAxisAlignment | Cross-axis alignment inside a single line | start | start, end, center |
textDirection | Left-to-right direction children are placed in for a horizontal layout | Not set | rtl, ltr |
verticalDirection | Order children and lines stack in vertically | down | up, down |
clipBehavior | How content that extends past the area is clipped — this doesn't work in the current version. | none | none, hardEdge, antiAlias, antiAliasWithSaveLayer |
Notes and tips
spacing and runSpacing are different: spacing is the gap between items on the same line, and runSpacing is the gap between one line and the next. Adjust both so your items don't bunch up.
When direction is horizontal, lines stack from top to bottom; when it's vertical, lines stack from left to right. Use verticalDirection to reverse the stacking order.
Learn more
For the full set of Widget Controls (Property, Method, and Event) that let you drive this widget from a script, see Wrap Widget Control.