No More Jank: How to Keep Your Flutter App Smooth and Snappy
summary
Explains why frames drop by tracing Flutter’s pipeline (widget → element → render → raster) and shows concrete fixes: parsing large JSON in build costs milliseconds so use compute isolates to offload work; deep trees, clips, shadows and large images cause overdraw so resize and cache images (cacheWidth/cacheHeight), use GridView.builder and RepaintBoundary selectively; debounce and cancel rapid search requests; prewarm shaders or run animations offstage; measures with DevTools timeline, repaint rainbow, CPU profile and a jank/FPS overlay (10 ms added per frame drops 60 Hz to ~49 or lower).
AI-written summary · about
chapters (12)
- 0:00Welcome
- 1:56Framekeeper in Flutter
- 3:41Flutter frame-by-frame rendering
- 5:46Jank villains and weaknesses
- 14:25Finding jank with DevTools
- 17:57Defeating CPU Smith
- 22:36Outsmarting the Architect
- 33:24Taming asyncs with debouncers
- 38:48Pre-compiling shaders
- 40:34Oracle's law for smooth apps
- 42:44Summary
- 43:47Q&A
related talks
40mFluttering at 60 FPS
43mNo More Jank: Escaping the Matrix of Frame Drops
49mDemystifying performance tune up in Flutter and Dart
38mDebugging performance issues with the Flutter DevTools
21mWanna get rid of UI Jank?
46mFlutter: 60 Frames of AOT Badassery
40mMastering Flutter Web
49mFirst Flutter, then Fly: Build Reactive & Performant Cross-Platform Apps