Best Practice for Loading Firebase Storage Images in Flutter Web Chat (Storage Path vs Download URL)

Question

I'm building a Flutter web chat app using Firestore and Firebase Storage. It allows users to send image, audio, and other attachments, and the receiver can view a translated version in their own language. These attachments are stored in Storage (including both the original and translated versions), while Firestore stores the storage path instead of the public image URL.

The problem is that every time the chat list renders when the web app first loads, it has to call getDownloadURL from the storage path. This takes a bit of loading time because that function returns a Future.

So I want to ask:

Is it better to store the image URL directly in Firestore (the URL that includes the token), or keep storing the storage path?

When rendering images on the web, is using NetworkImage / CachedNetworkImage the most optimal approach?

Currently I'm using an ImageProvider like this (storing the image bytes in memory instead of caching the URL):

```

class CachedFileImageProvider extends ImageProvider {
  final String url;

  CachedFileImageProvider(this.url);

  @override
  Future obtainKey(ImageConfiguration configuration) {
    return SynchronousFuture(this);
  }

  @override
  ImageStreamCompleter loadImage(
    CachedFileImageProvider key,
    ImageDecoderCallback decode,
  ) {
    return MultiFrameImageStreamCompleter(
      codec: _loadAsync(key, decode),
      scale: 1.0,
      debugLabel: key.url,
      informationCollector: () => [
        DiagnosticsProperty('Image provider', this),
        DiagnosticsProperty('Image key', key),
      ],
    );
  }

  Future _loadAsync(
    CachedFileImageProvider key,
    ImageDecoderCallback decode,
  ) async {
    try {
      String? resolvedUrl;
      final url = key.url;

      if (url.startsWith('gs://')) {
        resolvedUrl = await getFirebaseStorage()
            .refFromURL(url)
            .getDownloadURL();
      } else if (url.startsWith('blob:')) {
        final XFile file = XFile(url);
        final bytes = await file.readAsBytes();
        final buffer = await ui.ImmutableBuffer.fromUint8List(bytes);

        return decode(buffer);
      } else {
        resolvedUrl = await getFirebaseStorage().ref(url).getDownloadURL();
      }

      if (resolvedUrl != null) {
        // Use dart:html HttpRequest to fetch the image on Web.
        // This maps to a browser XHR/fetch, which naturally uses the browser's HTTP cache.
        // NetworkAssetBundle causes a crash because it tries to use dart:io.

        final html.HttpRequest request = await html.HttpRequest.request(
          resolvedUrl,
          responseType: 'arraybuffer',
        );

        final response = request.response as ByteBuffer;
        final bytes = response.asUint8List();
        final buffer = await ui.ImmutableBuffer.fromUint8List(bytes);

        return decode(buffer);
      }
    } catch (e) {
      debugPrint('Error loading web image: $e');
      rethrow;
    }
  }
}
```

Best Practice for Loading Firebase Storage Images in Flutter Web Chat (Storage Path vs Download URL)

Related Questions

Same Tag Questions

Popular Questions

0 Answers