Chapter 44 — Widgets and the Widget Tree

Level: beginner Estimated time: 7 hours Prerequisites: PART 1A (chapters 01 through 18), and chapter 43 — Installing Flutter and Project Structure What you'll be able to do by the end: read and write a Flutter widget tree, build a complete screen with MaterialApp, Scaffold, AppBar, Center, and Text, understand what a BuildContext is, and split a UI into small reusable widgets.

44.0 — Chapter objectives

By the end of this chapter, you will be able to:

• explain the phrase "in Flutter, everything is a widget";
• recognize that a widget is an ordinary Dart class, like the ones from chapter 08;
• explain why a widget is a description and not an object drawn on the screen;
• draw and read a widget tree;
• explain why Flutter prefers composition over inheritance (a reminder from chapter 11);
• use runApp() and identify the root of the tree;
• use MaterialApp and its home, title, theme, and debugShowCheckedModeBanner parameters;
• use Scaffold and its appBar, body, floatingActionButton, and bottomNavigationBar areas;
• write a first complete, compilable, readable screen;
• use Center and Text;
• read the indentation of a tree of nested widgets without getting lost;
• explain what a BuildContext really is;
• use Theme.of(context) and understand how it walks up the tree;
• name Flutter's three trees: widgets, elements, render objects;
• explain why Flutter can rebuild its UI very often without slowing down;
• put const in front of a widget and say what it changes;
• briefly explain what a Key is for;
• extract a portion of the UI into its own widget class;
• explain why extracting into a method is worse than extracting into a class;
• split a UI into small widgets;
• write a widget's constructor with named parameters (a reminder from chapter 09);
• tell child and children apart;
• open and read the VS Code widget inspector;
• read a Flutter rendering error message and find the faulty line.