Flutter Widgets

In Flutter, everything on screen is a widget. Buttons, text, images, padding, even invisible spacing — all widgets. Understanding widgets is the most important skill in Flutter development.

What Is a Widget

A widget is a building block of the UI. Think of widgets like LEGO bricks. Each brick has a specific shape and purpose. You connect bricks together to build the full picture.

  ┌─────────────────────────────────────────┐
  │               Scaffold                  │
  │  ┌──────────────────────────────────┐   │
  │  │           AppBar                 │   │
  │  │   ┌────────────────────────┐     │   │
  │  │   │  Text('My App')        │     │   │
  │  │   └────────────────────────┘     │   │
  │  └──────────────────────────────────┘   │
  │  ┌──────────────────────────────────┐   │
  │  │           Body                   │   │
  │  │   ┌─────────┐                    │   │
  │  │   │ Center  │                    │   │
  │  │   │ ┌─────┐ │                    │   │
  │  │   │ │Text │ │                    │   │
  │  │   │ └─────┘ │                    │   │
  │  │   └─────────┘                    │   │
  │  └──────────────────────────────────┘   │
  └─────────────────────────────────────────┘

The Widget Tree

Widgets nest inside each other to form a tree. The topmost widget is the root. Every widget below it is a child or descendant.

  MaterialApp
  └── Scaffold
      ├── AppBar
      │   └── Text
      └── Center
          └── Column
              ├── Text
              └── ElevatedButton

Flutter reads this tree from top to bottom and draws the screen accordingly.

Two Types of Widgets

StatelessWidget

A StatelessWidget never changes after it is drawn. It always shows the same content. Use it for static screens or display-only elements.

  StatelessWidget lifecycle:
  ──────────────────────────
  Create → build() → Draw on screen
  (build runs once and never again unless parent rebuilds)

class WelcomeMessage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Welcome to Flutter!');
  }
}

StatefulWidget

A StatefulWidget can change over time. A counter that increments, a checkbox that toggles — these need a StatefulWidget. Covered in detail in Topic 10.

Built-In Flutter Widgets — Quick Reference

Display Widgets

Widget	Purpose
`Text`	Shows a string on screen
`Image`	Shows an image (from asset or URL)
`Icon`	Shows a material design icon
`CircularProgressIndicator`	Shows a loading spinner

Layout Widgets

Widget	Purpose
`Column`	Arranges children vertically
`Row`	Arranges children horizontally
`Stack`	Layers children on top of each other
`Container`	Box with padding, margin, color, size
`Padding`	Adds space around a child
`Center`	Centers a child in available space
`SizedBox`	Fixed-size box, good for spacing
`Expanded`	Fills remaining space in Row/Column

Input Widgets

Widget	Purpose
`ElevatedButton`	Raised button with shadow
`TextButton`	Flat text-only button
`TextField`	User text input field
`Checkbox`	Tick box for boolean selection
`Switch`	On/off toggle
`Slider`	Drag to pick a value in a range

The Container Widget in Detail

Container is one of the most used widgets. It acts like a styled box that wraps another widget.

Container(
  width: 200,
  height: 100,
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
  ),
  child: Text('Hello', style: TextStyle(color: Colors.white)),
)

  ┌──────────────────────────────┐  ← margin (outside space)
  │  ┌────────────────────────┐  │
  │  │  padding (inside space)│  │
  │  │   ┌───────────────┐    │  │
  │  │   │  "Hello"      │    │  │
  │  │   └───────────────┘    │  │
  │  └────────────────────────┘  │
  └──────────────────────────────┘

The Text Widget — Styling

Text(
  'Flutter is Fun',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.deepPurple,
    letterSpacing: 1.5,
  ),
)

Composition Over Inheritance

In Flutter, you build complex UIs by combining simple widgets — not by inheriting from complex ones. A card with an image, title, and button is just Image + Text + Button wrapped in Column inside Container inside Card.

  Card
  └── Padding
      └── Column
          ├── Image
          ├── SizedBox (spacing)
          ├── Text (title)
          └── ElevatedButton

Hot Reload and Widgets

When you change a widget's properties and save the file, hot reload updates only the changed widget — not the whole app. This makes UI iteration very fast.

Previous lessons

Back to courses

Next lessons