Stage 2 of 7 · 10 lessons · ~3 months
Widgets and layout
Build screens the way your platform expects: small composable pieces, layout, lists, images, forms and theming. The aim is to turn a design into a screen that looks right on a small phone and a large one.
Start: Widgets and the widget treeLessons· one lesson for each topic, in this order
- 1Widgets and the widget treeLesson
- 2Hot reload, hot restart and the widget inspectorLesson
- 3Constraints go down, sizes go upLesson
- 4Row, Column, Stack, Expanded and PaddingLesson
- 5SafeArea, MediaQuery and LayoutBuilderLesson
- 6StatefulWidget and setStateLesson
- 7ListView.builder, GridView and imagesLesson
- 8Form, TextFormField and validationLesson
- 9Material 3 theming and dark modeLesson
- 10Material and Cupertino on both platformsOptionalLesson
Start with
- GuideFreeFlutter Documentation
Google
Do the first Flutter app codelab, then the layout, constraints and lists pages
Practise
Keep handy
Before moving on: Rebuild three screens from a real app you use (a login, a list with images and a detail page) so they adapt to a small and a large phone and support dark mode.
Read the page on how constraints work ("constraints go down, sizes go up") and most overflow errors disappear. Do the first-app codelab, then rebuild real screens instead of more tutorials.