Question 1

How does layout work in Flutter?

Accepted Answer

Start with the sentence: constraints go down, sizes go up, the parent sets position. Then unpack it: the parent passes BoxConstraints, the child picks its own size within them, the parent positions it. The valuable part is the consequence: a child knows neither its position nor its parent's size, which is why "half the screen" needs Expanded or LayoutBuilder. Tie it to an overflow example and the answer is complete.

Question 2

You see a RenderFlex overflow error on screen. How do you investigate?

Accepted Answer

In order: (1) the error says the direction and how many pixels overflowed, which tells you Row versus Column immediately; (2) I open the Layout Explorer in the DevTools Widget Inspector and look at the constraints that widget actually received; (3) I classify the cause — the child wanting too much, or the parent handing down unbounded constraints; (4) I fix per cause: Expanded/Flexible when the content should fit, scrolling when it genuinely should not. Hardcoding a size is not a fix — it returns on a different screen size.

Question 3

How do you build a responsive layout in Flutter?

Accepted Answer

Two tools, and the difference matters: MediaQuery gives you the size of the whole screen, LayoutBuilder gives you the constraints this widget received. Inside a component LayoutBuilder is nearly always the right choice, because the widget might sit in a panel, a dialog or a split view, where the screen size says nothing about its real space. My approach: pick breakpoints from the content rather than from device names, present the same data in a different arrangement, and reserve MediaQuery for genuinely screen-level decisions.

Question 4

When do you choose SizedBox over Container?

Accepted Answer

If you only need a size or a gap, use SizedBox — it can be const and does no extra rendering work. Container is really a composition of several widgets (Padding, DecoratedBox, ConstrainedBox, Transform) and earns its cost only when you actually need decoration, borders, a background or padding. Practical rule: if you are writing Container(height: 8), it should be const SizedBox(height: 8). It looks trivial, but in long lists it has a real effect on rebuild cost.

Symptom	Cause	Fix
A yellow-and-black "RenderFlex overflowed" stripe	Children want more space than the parent offers	Wrap in `Expanded`/`Flexible`, or make it scrollable with `SingleChildScrollView`
A ListView inside a Column throws	The Column offers unbounded height and the ListView wants unbounded too	Wrap it in `Expanded`, or set `shrinkWrap: true`
A widget is larger than expected	The parent passed tight constraints, leaving the child no choice	Change the box with `Align`, `Center` or `SizedBox`

Layout and constraints

📚 Sources and documentation