What is Flutter?

Flutter is Google's UI toolkit for building natively-compiled apps for mobile, web, and desktop from a single Dart codebase. Write your app once, and Flutter compiles it to a real Android app, a real iOS app, a web bundle, and desktop binaries — without going through each platform's native UI framework.

That last part is what makes Flutter different from tools that just wrap a web view. Flutter doesn't ask the operating system to draw its buttons and text — it brings its own rendering engine (Skia, or Impeller on newer versions) and paints every pixel itself. Your app looks and performs the same on every platform because Flutter isn't translating your UI into native components; it's drawing the UI directly.

This course assumes you already know Dart — variables, functions, classes, async/await. What's new here is Flutter's model for building UI, which is the whole point of this course.

Everything is a widget

In Flutter, nearly everything you see on screen — and plenty you don't see — is a widget. Text is a widget. A button is a widget. The padding around that button is a widget. Even the screen layout itself, and the app's overall theme, are widgets.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello, Flutter'),
        ),
      ),
    ),
  );
}

Read that from the inside out: Text displays a string. Center positions its child in the middle of available space. Scaffold provides the basic visual structure of a screen (app bar, body, floating action button slots). MaterialApp sets up app-wide things like theming and navigation. Every one of those is a widget, and each widget's only job is to describe one thing — nothing does layout, styling, and content all at once.

Widgets describe, they don't draw

A widget is not "a button on screen" — it's a lightweight, immutable description of what a piece of UI should look like given its current configuration. Flutter takes that description and figures out how to render it. When something needs to change (say, a counter increments), you don't reach into the screen and mutate a button's label directly. You describe a new widget tree with the updated value, and Flutter compares it to what's currently on screen and updates only what changed.

This is why Flutter is called a declarative UI framework, in contrast to an imperative one where you'd write step-by-step instructions like "find this label and change its text." You'll feel the difference immediately once you build your first StatefulWidget later in this course — instead of manually pushing updates to the screen, you just describe the new state and call setState, and Flutter handles the rest.

Why this matters going in

Keeping "everything is a widget, and widgets just describe UI" in mind will make the rest of this course click faster. Layout, styling, navigation, and even reacting to user input are all done the same way: by composing widgets together and describing what you want, not by issuing draw commands. The next lesson gets a real project running so you have something to experiment on.