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.
Interview question
When analyzing a Flutter CPU flame chart, what does the width of a bar primarily represent?
- a.The percentage of total CPU time consumed by that function and its children.Correct
- b.The total number of times that function was invoked during the recording.
- c.The depth of the function within the call stack.
- d.The duration of the function's execution in chronological order.
Why? this is the answer
The card explicitly states that the x-axis represents the percentage of CPU time consumed, so a wider bar indicates a greater proportion of CPU time. Option D is a common misconception, as the x-axis is for sorting calls alphabetically, not showing execution order.
Just read this? Test yourself on what you have been reading.
Read the original → docs.flutter.dev
- #flutter
- #performance
- #profiling
- #devtools
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles