# What Flutter Is — Flutter

Source: https://www.skillbyai.com/en/flutter/f-what

> Google's UI toolkit with its own renderer.

## 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.

![Three ideas: what Flutter is, the toolchain and hot reload, the Dart you need.](assets/figures/flutter/section-1-map.svg) — Figure 1.1 — Dart code, the Flutter framework and engine, and target platforms.

## The smallest Flutter app

runApp mounts a widget at the root of the tree.

```dart
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.

**Quiz:** How does Flutter draw its user interface?

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

*Answer:* Its own engine renders every pixel, rather than using native platform widgets. Flutter owns the rendering pipeline, which gives consistent visuals across platforms.