Hiprup

How does Flutter's architecture work? Walk through the Framework, Engine, and Embedder layers.

Flutter has a three-layer architecture that's worth memorizing:

1. Framework (Dart) — what you actually write. Layers (top to bottom): Material/Cupertino → Widgets → Rendering → Animation/Painting/Gestures → Foundation.

2. Engine (C++) — Skia / Impeller for rasterization, the Dart runtime, text layout (HarfBuzz), and platform plumbing. Exposes a low-level API (dart:ui) to the Framework.

3. Embedder (platform-specific) — the per-OS bridge. Android (Java/Kotlin), iOS (Obj-C/Swift), Web (JS), Windows/macOS/Linux. The embedder receives OS events and gives Flutter a surface to render to.

Tap event flow: OS → Embedder forwards to Engine → Engine wakes Dart → Framework's Gestures layer recognizes tap → your callback runs → setState → Framework rebuilds → Rendering pipeline → Engine rasterizes via Skia/Impeller → Embedder presents the surface to the OS.

Key insight: Porting Flutter to a new platform = writing a new embedder. The Framework and Engine are platform-agnostic.

Senior interviewers love hearing the three-layer architecture by name — Framework (Dart), Engine (C++), Embedder (per-platform). The bonus signal: explain that the Embedder is what makes Flutter portable — porting to a new platform = writing a new embedder. Mention Impeller replacing Skia on iOS (default since Flutter 3.10) and Android (rollout in progress) — that's the most current architecture detail in 2026.

How does Flutter's architecture work? Walk through the Framework, Engine, and Embedder layers. | Hiprup