Understanding constraints and fixing overflow

The rule

Flutter's official documentation sums up layout in one sentence: "Constraints go down. Sizes go up. Parent sets position." Once you understand it, layout errors stop being mysterious.

Parent:  "You may be 0 to 360 wide and 0 to 600 tall."   (constraints go DOWN)
Child:   "Then I will be 360 wide and 48 tall."           (size goes UP)
Parent:  "OK, I will place you at the top, 16 from the left."   (parent sets POSITION)

Constraints are four numbers: minimum and maximum width, minimum and maximum height. A child can never choose a size outside them, and a child does not decide its own position; its parent does.

Tight and loose constraints

This explains a classic surprise: Container(width: 100, height: 100) placed directly as the app's home fills the whole screen. The screen gives tight constraints (exactly full size), so the Container cannot be 100 x 100. Wrap it in Center, which loosens the constraints, and it becomes 100 x 100.

The yellow and black stripes: overflow

A RenderFlex overflowed by 87 pixels on the right.
The relevant error-causing widget was: Row

A Row gives its non-flexible children unbounded width (they may be as wide as they like), then adds them up. If a long Text wants 450 pixels on a 360-pixel phone, the Row overflows. Fixes:

• Wrap the long child in Expanded or Flexible so it gets only the remaining space, with overflow: TextOverflow.ellipsis or maxLines.
• Allow wrapping onto new lines with the Wrap widget instead of Row (good for chips and tags).
• Make the content scrollable with SingleChildScrollView when it is genuinely longer than the screen.
• Reduce sizes or use responsive layouts for small screens (module 10).

Unbounded height: ListView inside Column

Column(
  children: [
    const Text('Recent orders'),
    ListView(children: orderTiles),     // ERROR: Vertical viewport was given unbounded height
  ],
)

Column(
  children: [
    const Text('Recent orders'),
    Expanded(child: ListView(children: orderTiles)),   // FIX: give the list the remaining height
  ],
)

Another option is shrinkWrap: true on the ListView, which makes it only as tall as its items. It works, but it builds all items at once, so avoid it for long lists; prefer Expanded or making the whole screen one scrollable list (module 6).

Debugging layouts

Open Flutter DevTools' widget inspector and turn on "Show guidelines" or use the Layout Explorer: it shows each widget's constraints and size. Reading the first lines of the error in the console (which widget, which direction, how many pixels) usually points straight at the fix.

Common mistakes

• Adding fixed widths everywhere to "fix" overflow, which breaks on smaller phones.
• Putting a ListView or GridView directly inside a Column without Expanded.
• Using shrinkWrap: true on long lists, hurting performance.
• Ignoring the overflow stripes in debug because "it looks fine on my phone"; other phones are narrower or use larger fonts.