Layouts and Page Composition

In the previous lesson, one sentence was left hanging: asking for a size is not the same as getting it. That is the subject of this lesson, and it is the one concept in the framework that truly deserves a careful look. A developer who understands Flutter's constraints no longer runs into yellow stripes or layout exceptions; one who doesn't spends their time adding Expanded widgets at random until the screen stops complaining.

The difficulty comes from a habit carried over from the web. In CSS, an element has its own size and the browser then arbitrates. In Flutter, it's the opposite: the parent imposes constraints, the child chooses its size within those constraints, and the parent decides where to place it. Those three sentences, worded this way in the official documentation, account for absolutely every layout behavior, including the ones that seem absurd.

We will walk through this model, then the widgets that build on it: Row, Column, Expanded, Flexible, Stack. We will deliberately trigger horizontal overflow — the most common layout error in all of Flutter — and then see how to build a screen that fits on a phone 360 pixels wide as well as on a tablet.