Flutter Frame‑Rate Monitoring Tool and Rendering Pipeline Analysis in the Sunglasses Platform

The article introduces Sunglasses, a toolset created by JD.com’s main site to improve development efficiency across mobile teams, and focuses on the Flutter frame‑rate monitoring component now integrated into this platform.

Flutter Rendering Process

The UI rendering workflow consists of three stages: Layout, Paint, and Composite. Layout determines the size and position of each node in the render object tree using a depth‑first traversal, with optional relayout boundaries to limit the impact of subtree changes. Paint traverses the tree again, drawing each RenderObject onto separate layers; repaint boundaries are used to force layer switches when needed. Composite merges all layers, optimizes the tree, and hands the final image data to the Skia engine for GPU rendering.

Tree Structures

Flutter uses three interconnected data structures: Widget (declarative UI description), Element (runtime instance linking widgets to the render tree), and RenderObject (actual rendering implementation). The Widget tree creates the Element tree, which then creates the RenderObject tree.

Task Runners

The engine relies on four task runners: Platform, UI, GPU, and IO. The UI Task Runner executes Dart code in the root isolate, builds the widget tree, and generates the render tree. The GPU Task Runner converts the layer tree into GPU commands and manages GPU resources.

Per‑Frame Rendering Steps

1. The root isolate notifies the engine that a new frame is needed. 2. The engine asks the platform for the next VSync. 3. After VSync, animations are updated, widgets are rebuilt, the widget tree is traversed to produce the render tree, and a layer tree is generated. 4. A semantic tree is created for accessibility. 5. The GPU Task Runner rasterizes the layer tree via Skia and presents it on screen.

Flutter Frame‑Rate Monitoring Tool

The tool hooks into SchedulerBinding.instance.addTimingsCallback (or SchedulerBinding.instance.addTimingsCallback for newer versions) to receive CPU and GPU timing for each frame. Frames are classified: < 50 ms (normal), 50‑80 ms (possible jank), 80‑240 ms (verified jank), > 240 ms (big jank). When the app pauses, sampled frames are aggregated, averaged, and the resulting frame‑rate is sent via a channel to a native Android module, which forwards the data to Sunglasses for real‑time display.

Integration Flow

The integration process involves adding the monitoring code to the Flutter project, registering the callback, and configuring the native bridge that communicates with the Sunglasses platform.

Authors

Yang Yujiao, Xu Xiaoqing, Duan Bokan.

References

The Engine architecture – https://github.com/flutter/flutter/wiki/The-Engine-architecture Flutter’s Rendering Pipeline – https://www.youtube.com/watch?v=UUfXWzp0-DU How Flutter renders Widgets – https://www.youtube.com/watch?v=996ZgFRENMs Flutter official site – https://flutter.dev/