Fluttering at 60 FPS
summary
Explains why 60 FPS really means a 16 ms budget and shows how Flutter splits work across the UI and GPU threads so slow Dart code or expensive clips kill frames. Reveals that setState simply marks an element dirty not diffs state, that const widgets and stable keys avoid full subtree rebuilds, and that repaint boundaries and using compute for heavy work fix common slow paths. Demonstrates tools: performance overlay, profile mode timeline and repaint rainbow; five clipped animated widgets on a midrange phone makes the app stall.
AI-written summary · about
chapters (19)
- 0:00Introduction to Flutter performance
- 1:10Why 60 FPS matters
- 2:35Flutter threading model
- 5:23Widget tree and element lifecycle
- 8:13How Flutter updates UI
- 14:58When to optimize Flutter apps
- 18:28Optimizing setState usage
- 21:42Using inherited widgets efficiently
- 24:54Avoiding widget fragmentation
- 26:00Offloading work from UI thread
- 27:05Render object optimizations
- 28:31Repaint boundaries explained
- 29:54Avoiding expensive clipping
- 31:18Debug vs release vs profile modes
- 33:04Performance overlay tool
- 34:29Debugging widget rebuilds
- 35:34Repaint rainbow visualization
- 36:39Advanced profiling with timeline
- 39:30Q&A and closing
related talks
46mFlutter: 60 Frames of AOT Badassery
44mNo More Jank: How to Keep Your Flutter App Smooth and Snappy
49mDemystifying performance tune up in Flutter and Dart
49mFirst Flutter, then Fly: Build Reactive & Performant Cross-Platform Apps
42mGet Animated with Flutter!
41mFlutter under the hood. What makes Flutter tick
31mHow Flutter works under the hood
31mBuilding Consistently Fast Flutter Apps