How do you use Flutter DevTools to diagnose a performance problem?
Short Answer
Run the app in profile mode (not debug), open the Performance/CPU Profiler view in DevTools, record a timeline while reproducing the janky interaction, and look for frames exceeding the 16ms (60fps) budget, then inspect which widget's build/layout/paint is taking too long.
Debug mode includes extra assertions and disables optimizations, making its performance numbers unreliable — always profile in flutter run --profile, never debug mode. DevTools' Performance view shows a frame-by-frame timeline; frames above the 16ms line (for 60fps) are janky. Clicking a slow frame shows a flame chart breaking down exactly which build/layout/paint calls consumed the time.
The 'Track Widget Builds' and 'Track Layouts/Paints' options add markers showing which widgets rebuilt during a slow frame — often revealing a widget rebuilding far more often than expected.
Common Mistakes
- ×Profiling in debug mode and drawing performance conclusions from it — debug mode numbers don't reflect real release performance.
- ×Guessing at the cause of jank instead of actually recording a DevTools timeline.
Interview Tips
- →Explicitly say 'profile mode, not debug mode' — this specific detail is a common interview differentiator.