Part 5 · 1 chapters · ~8 min

Mobile Performance

Who the users are and what devices they own, cold and warm start, frame budgets and jank, profiling in profile mode with DevTools, rebuild scope and const widgets, image decoding and caching, list virtualisation, app size analysis and reduction, memory pressure and app kills, network and battery efficiency, and performance budgets in CI.

Measure on the right device

code

flutter run --profile -d <cheap-android-device>        # never judge performance in debug mode
flutter build appbundle --analyze-size                  # size breakdown by package and asset
flutter build apk --split-per-abi                       # smaller per-architecture APKs for direct distribution

// decode images at the size they are shown
Image.network(url, cacheWidth: (48 * MediaQuery.devicePixelRatioOf(context)).round());

// virtualise long lists: build only visible rows
ListView.builder(itemCount: txs.length, itemExtent: 72, itemBuilder: (c, i) => TransactionTile(key: ValueKey(txs[i].id), tx: txs[i]));

// startup: show the first frame, then load the rest
void main() { WidgetsFlutterBinding.ensureInitialized(); runApp(const App()); unawaited(warmCaches()); }

MOBILE PERFORMANCE FOR REAL USERS

design for the phone your users actually own

swipe the figure sideways, or tap expand for full screen

1/4

who your users are

In markets like Nigeria many users run low-cost Android phones on metered data. Test on a cheap device, not only the team's flagship phones.

test on cheap phonesthe median user's device