Everything is a widget

What is a widget?

A widget is a description of part of the user interface. Text('Hello') describes some text; Padding describes space around its child; Column describes children arranged vertically; MaterialApp describes the whole app. Widgets are cheap, immutable objects (their fields are final). When something changes, Flutter builds new widget objects and efficiently updates only what changed on screen.

The widget tree

MaterialApp
└── Scaffold
    ├── AppBar
    │   └── Text('Chai Shop')
    └── Center
        └── Column
            ├── Text('Masala chai')
            ├── Text('Rs 15')
            └── ElevatedButton
                └── Text('Order')

import 'package:flutter/material.dart';

void main() => runApp(const ChaiApp());

class ChaiApp extends StatelessWidget {
  const ChaiApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chai Shop',
      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.brown)),
      home: Scaffold(
        appBar: AppBar(title: const Text('Chai Shop')),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text('Masala chai'),
              const Text('Rs 15', style: TextStyle(fontSize: 22)),
              ElevatedButton(onPressed: () {}, child: const Text('Order')),
            ],
          ),
        ),
      ),
    );
  }
}

The key widgets so far

The build method

Every widget class has a build method that returns the widgets it is made of. Flutter calls build when the widget first appears and again whenever it needs to rebuild, possibly many times per second during animations. So build must be fast and should only describe the UI: no network calls, no heavy calculations, no changing of other variables.

BuildContext

BuildContext is a handle to a widget's location in the tree. It lets a widget look up things provided above it: Theme.of(context) finds the app theme, MediaQuery.sizeOf(context) the screen size, Navigator.of(context) the navigator. You receive it as the argument to build. A context only sees what is above it: inside ChaiApp.build above, context sits above MaterialApp, so Theme.of(context) there would not find the app theme. Use it inside widgets that are placed below MaterialApp, such as your screens.

Composition: small widgets

Instead of one giant build method, split the UI into small widget classes: MenuItemCard, PriceTag, OrderButton. Small widgets are easier to read, reuse and test, and Flutter can rebuild them independently. Mark them const when possible.

Common mistakes

• Writing everything in one huge build method. Extract widgets.
• Doing slow work in build: it can run many times; janky UI.
• Forgetting const on widgets that never change, losing a free optimisation (the analyser suggests it).
• Using a BuildContext from a widget that is no longer on screen, for example after an await, without checking mounted (next topic).