Flutter Performance Profiling: Find and Fix Jank
Use Flutter performance profiling to find jank: DevTools timeline, shader compilation fixes, RepaintBoundary, and list-view wins.
"My app feels slow" is not a diagnosis. Flutter performance profiling is the discipline of measuring first: run in profile mode, read the DevTools frame timeline, find the exact frames that miss their 16ms budget, and only then fix. Almost every "slow app" theory I've seen was wrong until the timeline said otherwise — the expensive widget was never the one the developer suspected. This tutorial profiles a real Flutter 3.x app, reads the frame timeline, and applies the four fixes that solve most jank: shader-compilation warmup, RepaintBoundary placement, ListView.builder with itemExtent , and rebuild discipline. What you'll learn Why you must profile in profile mode, never debug mode How to open DevTools and record the Performance timeline How to read the frame chart: UI thread vs raster thread vs shader spikes What causes shader compilation jank and how SkSL warmup fixes it When (and when not) to use RepaintBoundary How itemExtent removes scroll jank from long lists How to verify a fix with before/after frame metrics Step 0 — Never profile in debug mode Debug builds run with the Dart VM in JIT mode, assertions enabled, and no tree-shaking — they are *dramatically* slower than release. Profiling a debug build measures the debugger's overhead, not your app. Always profile a profile-mode build, which is nearly release-speed but keeps the observatory open: flutter run --profile Then open DevTools. If it doesn't launch automatically: dart devtools and paste the observatory URL from the terminal. The general debugging workflow in DevTools is covered in the debugging Flutter with DevTools guide — here we'll focus on the Performance tab. As a quick always-on sanity check, enable the performance overlay in your app root while you develop: MaterialApp(…