Row and Column: Arranging Widgets Without Scrolling
Think of Row and Column as rigid containers for laying out widgets horizontally or vertically. Use them for simple, fixed layouts like button bars. The footgun: unbounded children like Text will overflow; wrap them in an Expanded widget to fill remaining…
Why it exists
Every UI toolkit needs a way to solve the most basic layout problem: arranging multiple items in a simple line. Row and Column are Flutter's answer. They provide a declarative way to position children next to each other without manually calculating coordinates and sizes for every element, which would be brittle and unresponsive.
The mental model
Think of a Row or Column as a bookshelf with fixed dividers. The non-flexible children are like books with specific, known widths. They get placed on the shelf first. The children wrapped in an Expanded widget are like adjustable bookends; they expand to fill whatever space is left over. If your fixed-width books are too wide for the shelf, they 'overflow'—this is Flutter's yellow-and-black stripe error.
How it works
A Row (or Column) follows a two-pass layout algorithm. First, it asks its non-flexible children for their preferred sizes and lays them out. These are children not wrapped in Expanded or Flexible. Second, it calculates the remaining space and divides it among its flexible children. If the non-flexible children consume more space than is available, the flexible children get zero space, and the widget reports an overflow error.
When to use it
Use Row and Column for a small, fixed number of children that you know will fit on the screen. They are perfect for UI elements like a button bar at the bottom of a card, a user avatar next to a name, or a settings item with an icon, a label, and a toggle switch.
When not to use it
Do not use Row or Column if you have a dynamic list of children that might exceed the screen's boundaries. For scrollable lists, use a ListView. If you only need to position a single child within a larger area, use the Center or Align widgets, as they are more efficient for that specific task.
One canonical example
The most common beginner mistake is placing a long Text widget inside a Row. For example: a Row containing an Icon, a long paragraph of Text, and another Icon. By default, the Text widget tries to occupy a single, infinitely long horizontal line. This immediately overflows the Row's available width. The solution is to wrap the Text widget in an Expanded widget. This tells the Row: 'first, lay out the two Icons at their natural size, then give all remaining horizontal space to this Text widget.' The Text then correctly wraps to fit within its assigned bounds.
Interview question
A common beginner mistake is placing a long Text widget directly inside a Row, causing an overflow. What is the standard Flutter solution to ensure the Text adapts to the remaining horizontal space?
- a.Replace the Row with a Column to allow the Text to wrap vertically.
- b.Wrap the Text widget in an Expanded widget.Correct
- c.Set a specific maxWidth property on the Text widget to limit its size.
- d.Enclose the Row within a SingleChildScrollView to enable horizontal scrolling.
Why? this is the answer
The card explicitly states that wrapping a long Text widget in an Expanded widget is the solution to prevent overflow within a Row, allowing it to fill the remaining horizontal space. Option D is incorrect because SingleChildScrollView is for scrollable content, not for making a Text widget adapt to available space within a non-scrolling Row.
Just read this? Test yourself on what you have been reading.
Read the original → api.flutter.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
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