Hiprup

Explain Flutter's 'everything is a widget' philosophy.

Flutter's design philosophy: everything you see (and many things you don't) is a widget. Padding, alignment, themes, gesture detectors, navigators — all widgets.

Three implications:

  1. Composition over inheritance — instead of subclassing a Button with 50 properties, you compose smaller widgets (InkWell wrapping Container wrapping Text) — each doing one thing well.

  2. The widget tree IS your app's structure — there's no hidden DOM, no separate styling layer.

  3. Anything reusable is a widget — layouts, themes, animations, even your MyApp class.

Important nuance: Widgets are immutable, lightweight blueprints — they describe what the UI should look like. The actual rendered objects live in the Element and RenderObject trees (covered in the three-tree architecture question).

// 'Everything is a widget' — even things you might not think are widgets:

// Padding is a widget:
Padding(
  padding: const EdgeInsets.all(16),
  child: Text('Hello'),
)

// Alignment is a widget:
Center(child: Text('Centered'))

// Theme is a widget (an InheritedWidget under the hood):
Theme(
  data: ThemeData.dark(),
  child: MyButton(),
)

// Navigation is built from widgets (Navigator, Route):
Navigator.push(context, MaterialPageRoute(builder: (_) => DetailPage()));

// Even the app itself is a widget:
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(home: HomePage());
}

// Three implications:
//   1. COMPOSITION over inheritance — wrap widgets to add behavior
//   2. The 'widget tree' IS your app's structure
//   3. Anything reusable is a widget — including layouts, themes, animations
//
// This is why a typical build() method nests deeply — and why
// extracting widgets is the primary refactor in Flutter.

Each snippet shows a Flutter primitive that is itself a widget: Padding wraps a child to add space, Center aligns a child, Theme injects design tokens via an InheritedWidget, and Navigator.push builds a route from a widget. Even your top-level MyApp is a StatelessWidget.

Interview tip: The takeaway: you compose UI by nesting these single-purpose widgets rather than configuring one mega-widget with many properties.

The phrase to memorize: 'composition over inheritance'. Flutter's design choice is that instead of a Button class with 50 styling properties, you compose: InkWell( Container( padding, decoration, child: Text(...) ) ). The right interview signal is showing you understand WHY: each widget does one thing well, and you wrap to add behavior. Mention that widgets are immutable, lightweight blueprints — not the actual rendered objects (that's the Element / RenderObject tree).

Explain Flutter's 'everything is a widget' philosophy. | Hiprup