How can I measure the UI thread frame time bottleneck in a Flutter ListView before optimizing?
0 reputation · 25 Mar 2022, 02:54 UTC
In a Flutter application that displays a vertically scrolling ListView with over 2,000 custom widgets, each widget performs a moderate amount of layout and paint work. During profiling, the frame time frequently exceeds the 16 ms target, causing visible jank, but it is unclear whether the delay originates from the UI thread’s layout/paint phases or from the GPU rasterization step.
The goal is to obtain a reliable measurement of the UI thread bottleneck before applying any optimization, while keeping the measurement reproducible across runs and devices. The measurement should isolate the time spent in the framework’s build, layout, and paint callbacks without including Dart VM overhead or external I/O.
How can I capture the UI thread frame time breakdown for each frame, which specific Flutter tracing or timeline events should I enable to distinguish layout from paint costs, and what thresholds indicate that the bottleneck lies in the UI thread versus the rasterizer?