Debugging performance issues with the Flutter DevTools
summary
Uses Flutter DevTools frame histogram, timeline, CPU profiler and network tab to find four concrete causes: a feed built with SingleChildScrollView that builds ~50 items (replace with ListView.builder and frame build drops from ~200ms to ~23ms); a scroll listener calling setState that rebuilds the whole screen (extract the FAB into its own widget); oversized Unsplash images (1 MB, ~10 MP) fixed by requesting width=WdevicePixelRatio and avoiding uploadRasterImage work; JSON parsing blocking UI for ~2.4s moved off-thread with compute and validated with the flashlight* automated benchmark.
AI-written summary · about
chapters (23)
- 0:00Flutter performance debugging
- 1:12How Flutter renders frames
- 2:57Real device testing matters
- 4:45Live demo: slow Flutter app
- 5:26Analyze frame timings with DevTools
- 7:33UI thread bottlenecks in DevTools
- 9:43Track widget builds for inefficiencies
- 11:49Fix list performance with ListView.builder
- 13:13Verify performance improvements
- 15:25Avoid widget rebuilds on scroll
- 17:58Extract state management for performance
- 19:02Raster thread performance issues
- 20:50Debug image size and resolution
- 22:56Best practices for images
- 23:37Fix shader jank with save layers
- 26:51Detect UI thread blocking with CPU profiler
- 29:04Offload JSON parsing to background
- 31:55UI thread must not block
- 33:00Non-deterministic performance testing
- 33:42Introducing Flashlight for testing
- 35:07Measure performance with Flashlight CLI
- 36:14Compare before and after optimizations
- 37:19Summary
related talks
49mDemystifying performance tune up in Flutter and Dart
31mBuilding Consistently Fast Flutter Apps
40mFluttering at 60 FPS
44mNo More Jank: How to Keep Your Flutter App Smooth and Snappy
19mLazy Flutter performance
21mAdvanced Memory Management in Flutter
39mPerformance issues: the usual suspects
18mOptimize your productivity with Flutter developer tooling