Find Jank with Flutter's CPU Flame Charts
A flame chart visualizes CPU usage, showing which function calls are slowest. Use it to diagnose jank in Flutter. The footgun is misreading the x-axis: it's for sorting calls alphabetically, not showing execution order.
WHY IT EXISTS: Flutter apps must render frames in under 16ms (for 60 FPS) to feel smooth. Any Dart code on the UI thread that takes longer causes a dropped frame, or "jank". The CPU profiler and its flame chart view exist to find the exact functions responsible for these delays.
THE MENTAL MODEL: Think of a flame chart as a visual stack trace aggregated over time. The y-axis represents the call stack (function A called function B), and the x-axis represents the percentage of CPU time consumed. Wide, flat plateaus at the top of the "flames" are your primary suspects for performance bottlenecks.
HOW IT WORKS: The profiler samples your app's call stack thousands of times per second. It then aggregates these samples into the flame chart visualization. A function that appears in 30% of the samples is estimated to be consuming roughly 30% of the CPU time during the recording. The chart is organized with parent calls at the bottom and the functions they call stacked on top.
WHEN TO USE IT: Use the CPU profiler in Flutter's DevTools whenever you observe jank, slow app startup, or unresponsive UI. It is the primary tool for diagnosing performance problems in your Dart code. It's especially useful for finding expensive build() methods, slow data processing, or inefficient algorithms that are blocking the UI thread.
WHEN NOT TO USE IT: A CPU flame chart is not for diagnosing memory leaks or high memory usage; use the Memory profiler for that. It also doesn't track network request latency or other I/O operations; use the Network profiler for those tasks. It is focused purely on CPU execution time.
ONE CANONICAL EXAMPLE: You notice your app stutters when scrolling a long list of items. You open the CPU profiler, record the scrolling action, and see a very wide bar corresponding to your list item's build() method. Clicking to expand it, you find that a string formatting utility is being called repeatedly, consuming most of the time. By caching the formatted string instead of re-computing it on every build, the bottleneck is removed and scrolling becomes smooth.
Read the original → docs.flutter.dev
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.