Everything Is a Widget
The one idea
Section titled “The one idea”Flutter has a slogan: everything is a widget. Layout, padding, a button, the whole app — all widgets. But the deeper truth is what a widget is: an immutable description of a piece of UI at one moment. It is not the thing on screen; it is a recipe for it.
Because widgets are immutable and cheap, Flutter’s answer to “the UI changed” is radical: throw the widgets away and build new ones. You never mutate a widget. You describe the new state, Flutter rebuilds the description, and it efficiently updates only what actually differs.
What this module covers
Section titled “What this module covers”| Lesson | What you’ll learn |
|---|---|
| Widgets and the tree | Immutable config, composition, and the three trees (widget / element / render) |
| Stateless vs stateful | The two base widgets, and why State is a separate object |
| build and BuildContext | The build method’s contract, and what BuildContext really is |
| Keys | When Flutter needs a key to preserve state correctly |
Cheap descriptions, expensive reality
Section titled “Cheap descriptions, expensive reality”If Flutter rebuilt everything on screen every frame, it would be unusably slow. The trick is that widgets are only the cheap top layer:
flowchart TB w["Widget immutable description (rebuilt freely)"] --> e["Element living instance (persists, holds state)"] e --> r["RenderObject layout and paint (the expensive part)"]
Rebuilding widgets is cheap. The element and render layers underneath persist and are only updated where the new widget differs from the old. That split — disposable descriptions on top of durable machinery — is the whole performance story, and the next lesson makes it concrete.