PerformanceMedium30 XP4 min read
How do you profile Flutter app performance with DevTools?
TL;DR: Use Flutter DevTools' Performance tab to record a trace, identify janky frames (>16ms for 60Hz), and pinpoint expensive build() or paint() calls. Always profile on a real device in release/profile mode.
Full Answer
Debug mode has 5-10x slower performance due to assertions and lack of AOT compilation. Always profile in --profile mode on a real device for meaningful results.
Key DevTools Views
- ▸Performance overlay: Real-time GPU/UI thread bars (green = good, red = jank)
- ▸Timeline: Frame-by-frame trace, shows expensive build/paint calls
- ▸CPU Profiler: Function-level timing, find expensive Dart code
- ▸Highlight Repaints: Flashes repainted areas — use to find over-painting
- ▸Widget Rebuild Stats: Count how many times each widget rebuilt
⚠️
Profiling in debug mode is misleading. Use flutter run --profile or flutter build apk --profile for accurate results.
Code Examples
bashProfiling commands
Output
// Green bars: frame < 16ms (60fps) // Red bars: frame > 16ms (jank) // Yellow bars: frame 16-32ms (caution)
Common Mistakes
- ✗Profiling in debug mode — results are 5x slower than production
- ✗Optimizing based on gut feeling instead of DevTools data — profile before you optimize
Interview Tip
💡
Show the profiling workflow: measure → identify bottleneck → fix → measure again. Mention that most Flutter jank comes from expensive build() calls or shader compilation on first display.
#devtools#performance-overlay#timeline#jank