Stage 2 · Lesson 5 of 10
SafeArea, MediaQuery and LayoutBuilder
SafeArea moves its child away from notches, camera cut-outs and . Scaffold handles some of this for app bars, but body content often still needs it. MediaQuery tells you the screen size, the padding and the user's text scale.
LayoutBuilder tells you the constraints of one . That is better for adapting a single component, such as showing a grid on wide screens and a list on narrow ones. Wrap forms in a SingleChildScrollView, so they still work on a small phone with the keyboard open.
Test with device preview or at the smallest supported size, in landscape and with large text.
Common trapchecking only one and never seeing the overflow users get.
A question to check yourself, an AI practice session and 1 cheat sheet entry 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