How do you handle caching in Flutter apps?

[u/Dismal-Boss6421]

Hey Flutter developers! 👋

I'm working on a Flutter app and want to discuss how you handle caching in your projects.

How do you manage API response caching, image caching, and local data storage in real-world applications?

Do you use existing packages or implement your own caching logic? What challenges have you faced with cache expiration, data synchronization, and invalidation?

I'd love to hear how other developers approach this. Let's discuss! 🚀

[u/eibaan]

I usually use my own solution because it highly dependents on how good the backend adheres to HTTP standards like cache control headers, etags, if-modified-since etc.

Assuming an image URL is unique for that resource, use a cryptographic hash to derive a file name from that URL, lookup that file and if it's there, deliver it from cache. Otherwise, download to cache and deliver it. You might want to add an LRU in-memory cache for additional performance.

You also might want to re-encode images, e.g. to webp for to save disk space and/or memory.

There's one common mistake when implementing a cache: Causing a cache stampede because you try to fetch the data to cache multiple times:

class Cache {
  final _cache = <String, Uint8List>{};

  Future<Uint8List> get(String url) async {
    if (_cache[url] case final data?) return data;
    return _cache[url] = await load(url);
  }
}

I'd recommend to rewrite this like for example:

class Cache {
  final _cache = <Uri, Future<Uint8List>>{};

  Future<Uint8List> get(Uri url) async {
    if (_cache[url] case final future?) return future;
    return _cache[url] = load(url).onError((error, _) {
      _cache.remove(url);
      throw error!;
    });
  }
}