Explain Flutter's constraint-based layout protocol: 'constraints go down, sizes go up'.
TL;DR: Parent passes BoxConstraints (min/max width and height) down to each child. The child determines its own size within those constraints and reports it back. Parents then position children using the reported sizes.
Full Answer
Flutter's layout system follows a strict single-pass protocol summarized as: constraints go down, sizes go up, parent sets position.
- ▸Parent passes BoxConstraints (minW, maxW, minH, maxH) to child
- ▸Child must return a Size that satisfies the constraints
- ▸Parent then positions the child using an Offset
- ▸This is a single-pass algorithm — no relayout needed
Tight vs Loose Constraints
Tight constraints force an exact size (minW==maxW). Loose constraints give the child a range. 'Unbounded' constraints (maxWidth == infinity) are common in scrollable contexts and can cause layout errors if a child tries to be infinite.
The famous 'RenderFlex children have non-zero flex but incoming height constraints are unbounded' error comes from placing an Expanded/Flexible inside a Column that itself is inside a scrollable with unbounded height.
Code Examples
Max width: 393.0 Max height: 852.0
Common Mistakes
- ✗Wrapping a Column in a Column without giving the inner one a fixed height
- ✗Using double.infinity as a width inside a ListView (unbounded constraint)
Interview Tip
Cite the official Flutter docs phrase literally: 'Constraints go down. Sizes go up. Parent sets position.' It signals you've studied the internals.