Everything is a Widget

The widget tree

A Flutter UI is a tree of widgets. The app is a widget, which contains a screen widget, which contains layout widgets, which contain text and buttons. Each widget is a small, immutable description of one part of the UI, and Flutter assembles them into what you see.

Scaffold(                       // screen structure
  appBar: AppBar(title: Text('Profile')),
  body: Center(                 // centers its child
    child: Column(              // stacks children vertically
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        CircleAvatar(radius: 40),
        SizedBox(height: 12),   // empty space
        Text('Anand Gaur'),
      ],
    ),
  ),
)

Read it as a tree: Scaffold → Center → Column → [CircleAvatar, SizedBox, Text]. Indentation in your editor mirrors the visual nesting.

Two kinds of widgets

• Visible widgets — things you see: Text, Image, Icon, ElevatedButton.
• Layout widgets — invisible helpers that arrange others: Row, Column, Padding, Center, Container.

You combine both: wrap a Text in Padding, put several in a Column, and so on.

Widgets are immutable; you rebuild them

A widget never changes itself. To update the UI, Flutter rebuilds the widget tree with new values (you’ll see how with state in the next lesson). Because widgets are cheap, lightweight descriptions, rebuilding is fast — Flutter only repaints what actually changed.

Composition over configuration

Flutter favours composition — building complex UI by nesting many simple widgets — rather than one widget with dozens of options. Want a padded, rounded, tappable box? You wrap widgets: InkWell(child: Padding(child: Container(...))). This is the Flutter mindset.

const widgets for performance

If a widget never changes, mark it const. Flutter can then skip rebuilding it, improving performance. You’ll see const Text('Hello') throughout good Flutter code.

Reading widget documentation

Every widget has named parameters you pass in its constructor (child, children, padding, color). The single most common pattern is child: (one child) or children: (a list). Learning to read these is most of learning Flutter.

Common mistakes

• Confusing child (single) with children (list).
• Building one giant widget instead of composing small ones.
• Forgetting const on static widgets (small performance loss).

Summary: A Flutter UI is a tree of immutable widgets — visible ones (Text, Button) and layout ones (Row, Column, Padding). You build by composing small widgets, rebuild to update, and use const for unchanging parts.