Flutter's Wrap Widget: The Row That Won't Overflow
Flutter's Wrap widget is like text-wrapping for your UI. It arranges children in a row or column, automatically flowing them onto a new line when space runs out. It's perfect for dynamic lists of tags or chips.
Why it exists
A standard Row or Column will crash your app with a pixel overflow error if its children are too large for the available space. Wrap was created to provide a flexible layout that automatically handles this by moving content to a new line, just like text in a document, preventing crashes.
The mental model
Think of Wrap as text-wrapping, but for widgets. It lays out children one after another in a line. When it hits the edge of the container and the next widget won't fit, it simply starts a new line below (or next to it, if the direction is vertical) and continues placing widgets there.
How it works
Wrap places children along a main axis, defined by its direction property (usually horizontal). It attempts to place each child next to the previous one. If there isn't enough space, it creates a new "run" (a new line or column). You control the gap between children in the same run with spacing, and the gap between the runs themselves with runSpacing. You can also control the alignment of children within a run (alignment) and the alignment of the runs within the Wrap widget itself (runAlignment).
When to use it
Use Wrap when you have a variable number of children that need to be laid out linearly but might not all fit on one line. It's perfect for a list of user-selected tags, a gallery of small photo thumbnails, or a row of action buttons in a dialog that needs to be responsive to different screen sizes.
When not to use it
Do not use Wrap if you need children to stay in a single, scrollable line; use a ListView with scrollDirection: Axis.horizontal for that. If you know your items will always fit and you need the specific alignment controls of Row or Column (like spaceBetween), those widgets can be simpler.
One canonical example
A common use case is displaying a set of Chip widgets for user-selectable filters. As the user selects more filters, new chips are added. Wrap ensures they flow neatly onto multiple lines if the screen is too narrow to display them all in a single row, preventing any overflow errors.
Interview question
When would you primarily choose Flutter's Wrap widget over a Row widget?
- a.When precise spaceBetween alignment is required between items.
- b.To enable horizontal scrolling for a long list of widgets.
- c.To arrange children vertically instead of horizontally.
- d.When children might exceed available horizontal space and need to flow to a new line.Correct
Why? this is the answer
The Wrap widget's core purpose is to prevent pixel overflow errors by automatically flowing children onto a new line when they exceed the available space, a behavior a standard Row does not provide. For horizontal scrolling, a ListView is the appropriate choice, and Row/Column offer more specific alignment controls like spaceBetween.
Just read this? Test yourself on what you have been reading.
Read the original → api.flutter.dev
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles