Stage 2 · Lesson 4 of 10
Row, Column, Stack, Expanded and Padding
Most screens are and Rows, with Padding and SizedBox for spacing. mainAxisAlignment positions children along the direction of the Row or Column. crossAxisAlignment positions them across it.
Expanded makes a child take the remaining space. Flexible lets a child shrink when needed, which is how you stop long text overflowing a Row. A Stack with Positioned layers , such as a badge on an avatar.
Container is a shortcut that combines padding, decoration and size. A plain Padding or DecoratedBox is clearer when you need only one of those.
Common trapfixed widths from a design mock-up: a 360 pixel wide card overflows on a narrow phone.
A question to check yourself, an AI practice session and 2 cheat sheet entries come with the full roadmap. Unlock
Resources for this stage
Start with
- GuideFreeFlutter Documentation
Google
Do the first Flutter app codelab, then the layout, constraints and lists pages