How Xianyu Optimized Flutter Image Loading: Techniques and Lessons

Introduction

Image loading is a fundamental feature in mobile apps and a key factor of user experience. Xianyu’s Flutter team has continuously optimized its image framework since the first release.

Native Mode

The first version used a pure native image solution. Basic modules include native image rendering and cache handling.

Image Cache Settings

Flutter’s ImageCache can be configured by maximumSize (default 1000 images) and maximumSizeBytes (default 100 MB). Proper cache sizing improves loading speed.

Low‑End Phone Adaptation

A Flutter plugin obtains device information from the native side and adjusts cache size per device, reducing memory pressure on low‑end phones while increasing it on high‑end devices.

Disk Cache

Since Flutter lacks a built‑in disk cache, the team exposed the native disk‑cache API and bridged it to Flutter. Images are first looked up in memory, then in disk cache, and finally fetched from the network.

CDN Optimization

Three main strategies are used:

Resize images to the actual display size before transmission.

Compress images without visible quality loss.

Prefer WebP (including animated WebP) over GIF for smaller size and better transparency support.

Other Flutter Optimizations

Pre‑cache images with precacheImage for instant display.

Reuse widget elements by comparing image descriptors in didUpdateWidget.

ListView performance: split large cells and set cacheExtent appropriately.

Limitations of the Native‑Only Approach

Two major drawbacks:

Native image loading capabilities cannot be reused by Flutter, leading to duplicated functionality.

Separate memory caches for native and Flutter increase peak memory usage.

Bridging Native and Flutter with External Texture

The team implemented a shared‑context external‑texture solution, allowing Flutter to display images loaded by the native framework without copying data. This reduces latency and memory consumption.

Multi‑Page Memory Optimization

By monitoring the page stack, images on non‑top pages are automatically released, preventing linear memory growth as more pages are opened.

Package Size Reduction

Sharing native image resources between Flutter and native modules eliminated duplicate assets, decreasing the app package size by about 1 MB.

Future Work

Further refinements, performance data, and an open‑source release are planned.