What Flutter Is

A framework that paints its own UI

Flutter is an open-source UI toolkit from Google for building apps for Android, iOS, web, Windows, macOS and Linux from one Dart codebase. Instead of wrapping native buttons and lists, Flutter ships its own rendering engine (Impeller is the default on iOS and modern Android; Skia is still used on some targets) and draws every pixel to a canvas. The layers are: your app code, the framework written in Dart (widgets, layout, gestures, animation), the engine in C++ (rendering, text, Dart runtime) and a thin platform embedder. In release builds Dart is compiled ahead of time to native machine code (or to JavaScript/WebAssembly on the web).

One codebase, many screens

Flutter compiles Dart code and draws every pixel itself, so the same UI runs on mobile, web and desktop.

The smallest Flutter app

runApp mounts a widget at the root of the tree.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter',
      home: Scaffold(
        appBar: AppBar(title: const Text('Hello')),
        body: const Center(child: Text('One codebase, many platforms')),
      ),
    );
  }
}

A painter, not a costume shop

Cross-platform tools that wrap native controls borrow each platform's costumes; Flutter brings its own paint and canvas, so the picture looks the same everywhere and only the frame (the platform window) differs.

Quick check: How does Flutter draw its user interface?

• It runs inside a WebView on every platform
• It converts widgets into native Android and iOS views
• Its own engine renders every pixel, rather than using native platform widgets
• It generates HTML for all targets