Widgets — The Building Blocks

In Flutter, everything is a widget — text, buttons, padding, even layout itself.

Example: widgets nested inside widgets

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('My App')),
    body: const Padding(
      padding: EdgeInsets.all(16.0),
      child: Text('Welcome to my first screen!'),
    ),
  );
}

Renders a screen with a top app bar titled "My App", and padded body text below it.

You build a screen by nesting widgets inside each other's child (or children) property, forming a tree — here, Scaffold contains an AppBar and a Padding, which itself contains a Text. Flutter re-draws only the parts of that tree that actually changed when something updates, which is part of why apps built this way stay fast even as the UI grows more complex.