The Quest for 120fps Modern mobile devices boast 120Hz displays, making performance expectations higher than ever. If your Flutter app is stuttering or dropping frames, users will feel it immediately. Here is a battle-tested guide to optimizing your Flutter apps.
1. Eliminate Unnecessary Rebuilds
The most common source of performance bottlenecks in Flutter is rebuilding widgets that haven't changed. - **Use const constructors:** This tells Flutter that the widget can be cached and reused. - **Split large widgets:** Break down monolithic widgets into smaller stateless widgets so that state changes only rebuild the specific nodes that need updates. - **Optimize list views:** Always use `ListView.builder` instead of `ListView` for long lists, as it lazily loads widgets that are visible on the screen.
2. Leverage RepaintBoundaries
When a widget paints, it can trigger repainting of its sibling widgets. A `RepaintBoundary` creates a separate display list for its child, isolating repaints: - Use it around heavy animations or complex drawings. - Use it for widgets that update frequently while their surroundings remain static (e.g., custom loaders, progress bars).
3. Avoid Expensive Build Operations
Never perform heavy synchronous computations, file I/O, or JSON parsing directly inside a `build` method. The build method should be pure and fast (under 16ms for 60fps, under 8ms for 120fps). Offload heavy work to background isolates using `compute()` or workpools.
4. Optimize Image Assets
Unoptimized images are a massive memory drain: - Always resize images to the actual display dimensions. - Use `cacheWidth` and `cacheHeight` on `Image.asset` or `Image.network` to decode images at their display size, saving megabytes of RAM. - Compress images using modern formats like WebP.
5. Profile with Flutter DevTools
Don't guess at performance issues — measure them: - Use the **Performance** tab to analyze frame times and identify CPU/GPU bottlenecks. - Use the **CPU Profiler** to find slow functions. - Use the **Memory** tab to detect leaks and inspect the heap.
Following these practices helped me reduce CPU overhead by 40% and reach stable 120fps in the ArvyaX app!