Skip to content

Performance

Roman Cinis edited this page Jul 27, 2024 · 3 revisions

Performance

Important

Since v1.6.0 of world_countries using the world_flags package for country flags (in the country and phone code pickers), which increased performance even more. Here you can compare the old (asset-based) approach with colored fonts with a score of 89 vs new CustomPainter-drawn country flags with a score of 90.

The response and performance checking were done on the example in profile mode with the maximum possible number of countries, names, and languages and high-speed scrolling through the list of countries. Profiling was performed on 14.04.2023 in the Flutter version 3.22.0-10.0.pre.13 on physical, unmodified, mid-range devices:

  • iPhone 12 (iOS 17.4.1)
  • Motorola Moto G Pro (Android 12)
  • In browser (no WASM), in Chrome (123.0.6312.122) on macOS (Sonoma 14.4.1) on MacBook Pro (14-inch, M3 Max).

Performance on desktops was not documented, because it is quite obvious that these platforms have no problem with rendering a list with a single emoji and two lines of text per tile, even in debug mode.

The little bottleneck was a full-scale country picker (due to colored font renderings on the leading position), but even that passed the rendering limit of 12ms per frame. The average rendering time per frame was 7-12ms for the country picker (with the native state name in the subtitle) and 10ms for the simple picker (with only the translated state name) on Android devices, and analogously 3ms and 2ms on iPhone, web succeeded with an average of 11ms and 12ms.

iOS

RPReplay_Final1713038231.MP4

Android

screen-20240413-232350.mp4

Web

Trace-20240414T203603.json


References

Flutter performance profiling

Clone this wiki locally