← Flutter & Dart

Flutter Fundamentals

What is a widget in Flutter, and what does it mean that "everything is a widget"?

Show answer — try answering out loud first

In Flutter, a widget is the immutable description of a part of the interface. Almost everything you see, and many things you don't see (structure, padding, alignment, gestures), are widgets. They're organized into a widget tree, and Flutter uses that tree to draw the screen.

A widget isn't the pixel on the screen: it's a recipe that describes how something should look or behave. Flutter takes those recipes, combines them into a tree, and turns them into what gets painted.

"Everything is a widget" means that not only buttons and text are widgets, but so are:

  • The layout: Row, Column, Stack, Padding, Center.
  • The styling: Theme, Opacity, DecoratedBox.
  • The interaction: GestureDetector, InkWell.
  • Even the whole app: MaterialApp, Scaffold.

Widgets are immutable: they don't change once created. When something changes, Flutter creates new widgets and compares them to update only what's needed.

import 'package:flutter/material.dart';

class Greeting extends StatelessWidget {
  const Greeting({super.key});

  @override
  Widget build(BuildContext context) {
    // A widget tree: Center contains a Padding, which contains a Text
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Text(
          "Hello, Flutter",
          style: const TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

In this example there are four nested widgets (CenterPaddingText, plus the Greeting). Each one describes a small part; together they form the UI.

Thinking that a widget "is" the visual element and that modifying it changes the screen directly. It doesn't: widgets are immutable and disposable. Flutter recreates them constantly on every build. What persists across rebuilds is the State (in stateful widgets) and the internal Element objects, not the widget itself.

"In Flutter a widget is an immutable description of a part of the interface. The phrase 'everything is a widget' means that not only the visible controls are widgets, but also the layout like Row and Column, the styling, the gestures, and even the whole app. I organize them into a widget tree, and Flutter uses that tree to paint the screen. Since widgets are immutable, when something changes Flutter creates new widgets and compares them to update only what's needed."

Quick challenge

Why are widgets said to be "cheap" to create and dispose of?

See answer

Because a widget is just a lightweight configuration (a description), not the heavy object that gets drawn on screen. Flutter separates the widget (the recipe) from the RenderObject (what actually gets painted) through the Elements. That's why Flutter can recreate widgets on every build without a performance problem: the expensive part (the render) is reused whenever possible.