When building beautiful and responsive UIs in Flutter, one layout widget that often goes unnoticed is the Wrap widget. Unlike Row and Column, which can overflow when there’s not enough space, Wrap automatically moves its children to the next line (or column) — just like text wrapping!
In this tutorial, we’ll explore what the Wrap widget does, how to use it, and when it’s a better choice than Row or Column. Let’s build a responsive tag layout as an example.
What is Wrap in Flutter?
The Wrap widget displays its children in horizontal or vertical runs and automatically wraps them when space runs out. It’s perfect for:
-
Chips or tags
-
Button groups
-
Image galleries
-
Dynamic layouts with variable child size
Wrap(
spacing: 8.0, // gap between items horizontally
runSpacing: 4.0, // gap between lines
children: [
Chip(label: Text("Flutter")),
Chip(label: Text("Wrap")),
Chip(label: Text("Widget")),
Chip(label: Text("Responsive")),
Chip(label: Text("Layout")),
],
)
Key Properties
| Property | Description |
|---|---|
direction |
Horizontal (default) or vertical wrapping |
spacing |
Horizontal spacing between children |
runSpacing |
Vertical spacing between runs |
alignment |
How children are aligned on the main axis |
runAlignment |
How runs are aligned on the cross axis |
Example with alignment:
Wrap( alignment: WrapAlignment.center, runAlignment: WrapAlignment.start, children: [...], )
When to Use Wrap vs Row or Column
Use Wrap when… |
Use Row/Column when… |
|---|---|
| You have dynamic or many items | You have a fixed number of items |
| You want automatic line breaks | You want single-line layout |
| Space may vary across devices | Space is predictable |
Real Example: Tags Section
Let’s build a reusable widget that displays a list of tags using Wrap.
class TagSection extends StatelessWidget {
final List<String> tags;
const TagSection({required this.tags});
@override
Widget build(BuildContext context) {
return Wrap(
spacing: 10,
runSpacing: 6,
children: tags
.map((tag) => Chip(
label: Text(tag),
backgroundColor: Colors.blue.shade100,
))
.toList(),
);
}
}
Usage:
TagSection(tags: ["Flutter", "Dart", "Mobile", "UI", "Cross-Platform"])
The Wrap widget is a powerful tool for creating adaptive and flexible layouts. Whether you’re building tag clouds, image galleries, or dynamic grids, Wrap helps you create clean, responsive UIs with minimal effort.
Next time you reach for a Row or Column, ask yourself — will these widgets wrap? If yes, go with Wrap!
