A list that feels smooth on a developer's phone can stutter on a customer's device. The useful question is not whether the code looks optimized, but which work misses the frame deadline in the scenario users actually experience.
Measure a repeatable journey
Use a representative physical device and Flutter's profile mode when investigating frame performance. Debug behavior includes development overhead and is not a reliable release-performance measurement. Pick a repeatable action, such as opening a catalog and scrolling through image-heavy cards, then record it with DevTools.
Identify the kind of work
DevTools helps distinguish time spent preparing the UI from rasterizing the frame. This distinction matters: reducing a rebuild will not necessarily fix an expensive visual effect, and simplifying shadows will not repair heavy synchronous parsing on the UI isolate.
Check the obvious data costs
A thumbnail should not require downloading and decoding a full-resolution camera image. Request an appropriate size from the server, reserve layout space while it loads, and decide how failures look. Paginate large datasets and build long lists lazily. Avoid sorting the entire dataset every time a small visual state changes.
Keep rebuild work focused
Split widgets around meaningful responsibilities so a changing counter does not needlessly rebuild an unrelated expensive subtree. Use constant widgets where their configuration is truly constant. Cache derived values only when measurements justify it and when you can clearly invalidate the cache.
Visual effects can also be costly. Review repeated clipping, opacity, offscreen layers, and complex compositions in the hot path. Change one suspected cause at a time and rerun the same interaction. Otherwise an improvement cannot be attributed to a specific fix.
Write down a useful performance result
- Device and operating-system version.
- Build mode and relevant dataset size.
- Exact action that reproduces the issue.
- What the recording showed before the change.
- The same recording after the change.
A performance fix is easier to preserve when the team knows what it protects. Keep a short repeatable scenario in the release checklist, especially for pages with large images, animation, maps, or frequently updating content.
Official references: Flutter performance profiling and Flutter performance best practices.
