What are Widgets?

Relax. We'll talk through this in plain words — no textbook voice.

In Flutter, a widget is the building block that represents your UI. A button, a line of text, some padding, a layout, even an entire screen — they're all widgets. Instead of thinking of a widget as an object, think of it as an instruction card describing what should appear on screen. A Flutter app is structured as a widget tree. A parent widget holds a child widget, and that child widget can hold further children of its own. Understanding this tree will help you pick up layout, styling, and state updates much faster.

dart

Scaffold(
  appBar: AppBar(
    title: const Text('Widget Tree'),
  ),
  body: const Center(
    child: Text('Every UI piece is a widget'),
  ),
)

You should see

A screen with an app bar appears, and in the middle of the body you'll see the text "Every UI piece is a widget".

What's Next

Next, learn about the two widget types: StatelessWidget and StatefulWidget.

Easy traps

Cramming the entire UI into a single Container makes the code hard to read. Split widgets up by responsibility instead.