Part 0 · 2 chapters · ~12 min

Flutter's Engine and Rendering

The layered architecture (framework in Dart, engine in C++, platform embedders), drawing every pixel versus platform widgets, the frame pipeline (vsync, animate, build, layout, paint, composite, raster), UI and raster threads, Impeller versus Skia and shader jank, and reading frame timings in DevTools.

Framework, engine, embedder

code

flutter --version
# Flutter 3.41.4 • channel stable · Tools • Dart 3.11.1 • DevTools 2.54.1   (this machine)

flutter run --profile                      # profile mode: AOT-compiled, with performance overlays
flutter run --profile --trace-skia         # deeper raster tracing when investigating jank
# DevTools → Performance: UI and raster time per frame; red bars exceed the budget

THE FLUTTER STACK

from your Dart code to pixels

swipe the figure sideways, or tap expand for full screen

1/4

your code and the framework

Everything down to layout and painting is Dart code you can read: the framework is a library, not a black box.

Dart all the way to paintreadable framework source

The frame pipeline

At 60 Hz each frame has 16.7 ms; at 90 Hz 11.1 ms; at 120 Hz 8.3 ms. Measure in profile mode on a real device: debug mode runs Dart in JIT with assertions and is much slower, so its numbers mislead.

ONE FRAME IN FLUTTER

vsync to pixels, inside 16.7 ms at 60 Hz (8.3 ms at 120 Hz)

swipe the figure sideways, or tap expand for full screen

1/4

two threads

The UI thread runs Dart (build, layout, paint into a layer tree); the raster thread turns that tree into GPU commands. Either one exceeding the budget drops a frame.

UI thread + raster threadboth must fit the budget