Flutter Image Memory Optimization Practices and External Texture Solution

Background: Mobile developers frequently encounter out‑of‑memory (OOM) crashes caused by image memory usage, and Flutter applications face similar challenges.

The article shares Beike's practical experience in addressing Flutter image memory problems and announces the upcoming open‑source Flutter image library.

Image memory basics: decoding consumes the most memory; the memory footprint equals image width × height × bytes‑per‑pixel, applicable to both iOS and Android.

Flutter image loading flow: ImageProvider → Image → ImageStream → ImageCache, with a step‑by‑step description of NetworkImage loading, cache lookup, and codec creation.

Initial solutions: set cacheWidth and cacheHeight on Image/FadeInImage widgets, enable gaplessPlayback , and modify ResizeImage equality logic via AOP (beike_aspectd) to prevent flickering.

Limitations discovered: inappropriate cache dimensions cause blur, image release timing cannot guarantee full memory reclamation, and large‑image peak memory remains unsolved because the engine decodes the original bitmap before rasterization.

Final solution – external texture: move image decoding and caching to native code (iOS and Android), register a texture ID with the Flutter engine, and render it using the Texture widget, thereby avoiding Flutter‑side memory spikes.

Implementation highlights include iOS texture registration via FlutterTexture interface, Android integration using Glide for decoding and sampling, and the necessary Dart‑side channel communication.

Results: significant reduction in memory consumption and OOM occurrences on both platforms, with visual quality comparable to native rendering.

Future work: open‑source the external‑texture solution, explore native‑Dart resource sharing, and investigate video‑texture techniques for PlatformView video playback.

Code examples:

Image.network(imageUrl_3000x4000_png, width: width, height: height, cacheWidth: 300, cacheHeight: 400)

/// Whether to continue showing the old image (true), or briefly show nothing (false) final bool gaplessPlayback;

class ResizeImage extends ImageProvider<_SizeAwareCacheKey> { // ... @override bool operator ==(Object other) => identical(this, other) || other is ResizeImage && runtimeType == other.runtimeType && imageProvider == other.imageProvider && width == other.width && height == other.height; @override int get hashCode => imageProvider.hashCode ^ width.hashCode ^ height.hashCode; }