Flutter Widgets: Everything is a Widget

WHY IT EXISTS Traditional UI frameworks often separate layout (XML), styling (CSS), and logic (Java/Kotlin). This creates friction and context-switching. Flutter unifies all three into a single, declarative approach using widgets written in one language, Dart, to simplify development.

THE MENTAL MODEL A widget is an immutable blueprint for a part of the user interface. Think of it like a LEGO brick: you don't change a brick, you replace it with a different one. You compose small, single-purpose widgets (like Text, Icon, Padding) inside larger layout widgets (like Row, Column, Stack) to build your entire screen.

HOW IT WORKS You declare your UI as a tree of widgets. For example, a Row widget might contain an Icon widget and a Text widget. When your app's state changes (e.g., a user taps a button), Flutter efficiently rebuilds the affected parts of the widget tree. It compares the new widget tree to the old one and only updates what's necessary on the screen. This declarative 'UI as code' approach is fast and predictable.

WHEN TO USE IT Always. Building any UI in Flutter involves composing widgets. This applies to visible elements like buttons and images, layout structures like grids and lists, styling elements like themes and padding, and even interaction handlers like gesture detectors. The principle is 'composition over inheritance'.

WHEN NOT TO USE IT You don't use widgets for non-UI logic, such as making network requests or accessing a database. While a widget might trigger these actions, the business logic itself should live outside the widget tree in separate classes or services. This keeps your UI code clean and focused on describing the interface.

ONE CANONICAL EXAMPLE A simple 'Follow' button. You might use a Row widget to hold an Icon and a Text widget ('Follow'). You'd wrap this Row in a Padding widget for spacing, and then wrap that in a GestureDetector widget to handle taps. Each part is its own widget, composed together to create the final element.