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

Question

Accepted Answer

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.