How Flutter’s Rendering Engine Works: Inside the UI and GPU Threads

Flutter is a UI framework that enables a single codebase to render on multiple platforms, offering better performance than WebView‑based solutions by using its own rendering engine.

Architecture Overview

The rendering process involves two main threads: the UI Thread, which builds widget, element, and render object trees, and the GPU Thread, which rasterizes the layer tree using Skia.

UI Thread

The UI Thread executes Dart code, constructs the Widget Tree, Element Tree, and RenderObject Tree, performs layout, and generates a Layer Tree containing drawing commands.

void handleBeginFrame(Duration rawTimeStamp) {<br>  // ...<br>  final Map<int, _FrameCallbackEntry> callbacks = _transientCallbacks;<br>  _transientCallbacks = <int, _FrameCallbackEntry>{};<br>  callbacks.forEach((int id, _FrameCallbackEntry entry) {<br>    if (!_removedIds.contains(id)) _invokeFrameCallback(entry.callback, _currentFrameTimeStamp, entry.debugStack);<br>  });<br>  // ...<br>}

Key callbacks include _transientCallbacks for animation frames, _persistentCallbacks for continuous rendering, and _postFrameCallbacks for frame‑completion notifications.

GPU Thread

The GPU Thread receives the Layer Tree, rasterizes it via Skia, and composites the result onto the screen. It runs methods such as Render.compositeFrame() to build a Scene and submit it to the window system.

void compositeFrame() {<br>  Timeline.startSync('Compositing', arguments: timelineArgumentsIndicatingLandmarkEvent);<br>  try {<br>    final ui.SceneBuilder builder = ui.SceneBuilder();<br>    final ui.Scene scene = layer.buildScene(builder);<br>    _window.render(scene);<br>    scene.dispose();<br>  } finally {<br>    Timeline.finishSync();<br>  }<br>}

Rendering Pipeline Steps

Animate : Triggered by handleBeginFrame when there are active animations.

Build : BuildOwner.buildScope() constructs or updates the three trees.

Layout : PipelineOwner.flushLayout() runs layout passes, calculating size and position using constraints.

Compositing Bits : PipelineOwner.flushCompositingBits() marks render objects that need compositing.

Paint : PipelineOwner.flushPaint() generates drawing commands and creates the Layer Tree.

Submit (Compositing) : renderView.compositeFrame() submits the Layer Tree to the GPU Thread.

GPU Raster & Compositing : The GPU Thread rasterizes the layers and composites them onto the display.

Key Concepts

Constraints : Parent‑to‑child size limits (min/max width/height) used during layout.

RepaintBoundary : Marks subtrees that can be repainted independently to improve performance.

Layer Types : Various layer classes such as ClipRectLayer, OpacityLayer, TransformLayer, etc., define how content is composited.

Comparison with Android and Chromium

All three platforms share a similar high‑level pipeline (VSync → UI thread → GPU thread), but differ in implementation details. Android uses a native view hierarchy, Chromium employs an asynchronous tiled rasterizer, while Flutter uses a synchronous rasterizer with a custom Skia‑based engine.

Understanding these steps helps developers optimize Flutter applications for performance and visual fidelity.