A Flutter widget that handles and shows an image downloaded from a Firebase Storage document.

firebase_storage_image.dart

import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:meta/meta.dart';

enum ImageDownloadState { Idle, GettingURL, Downloading, Done, Error }

class FirebaseStorageImage extends StatefulWidget {
  /// The reference of the image that has to be loaded.
  final StorageReference reference;
  /// The widget that will be displayed when loading if no [placeholderImage] is set.
  final Widget fallbackWidget;
  /// The widget that will be displayed if an error occurs.
  final Widget errorWidget;
  /// The image that will be displayed when loading if no [fallbackWidget] is set.
  final ImageProvider placeholderImage;

  FirebaseStorageImage(
      {Key key,
      @required this.reference,
      @required this.errorWidget,
      this.fallbackWidget,
      this.placeholderImage}) {
    assert(
        (this.fallbackWidget == null && this.placeholderImage != null) ||
            (this.fallbackWidget != null && this.placeholderImage == null),
        "Either [fallbackWidget] or [placeholderImage] must not be null.");
  }

  @override
  _FirebaseStorageImageState createState() => _FirebaseStorageImageState(
      reference, fallbackWidget, errorWidget, placeholderImage);
}

class _FirebaseStorageImageState extends State<FirebaseStorageImage>
    with SingleTickerProviderStateMixin {
  _FirebaseStorageImageState(StorageReference reference, this.fallbackWidget,
      this.errorWidget, this.placeholderImage) {
    var url = reference.getDownloadURL();
    this._imageDownloadState = ImageDownloadState.GettingURL;
    url.then(this._setImageData).catchError((err) {
      this._setError();
    });
  }

  /// The widget that will be displayed when loading if no [placeholderImage] is set.
  final Widget fallbackWidget;
  /// The widget that will be displayed if an error occurs.
  final Widget errorWidget;
  /// The image that will be displayed when loading if no [fallbackWidget] is set.
  final ImageProvider placeholderImage;

  /// The image that will be/has been downloaded from the [reference].
  Image _networkImage;
  /// The state of the [_networkImage].
  ImageDownloadState _imageDownloadState = ImageDownloadState.Idle;

  /// Sets the [_networkImage] to the image downloaded from [url].
  void _setImageData(dynamic url) {
    this._networkImage = Image.network(url);
    this
        ._networkImage
        .image
        .resolve(ImageConfiguration())
        .addListener((_, __) {
      if (mounted)
        setState(() => this._imageDownloadState = ImageDownloadState.Done);
    });
    if (this._imageDownloadState != ImageDownloadState.Done)
      this._imageDownloadState = ImageDownloadState.Downloading;
  }

  /// Sets the [_imageDownloadState] to [ImageDownloadState.Error] and redraws the UI.
  void _setError() {
    if (mounted)
      setState(() => this._imageDownloadState = ImageDownloadState.Error);
  }

  @override
  Widget build(BuildContext context) {
    switch (this._imageDownloadState) {
      case ImageDownloadState.Idle:
      case ImageDownloadState.GettingURL:
      case ImageDownloadState.Downloading:
        return Image(image: this.placeholderImage) ?? this.fallbackWidget;
      case ImageDownloadState.Error:
        return this.errorWidget;
      case ImageDownloadState.Done:
        return this._networkImage;
        break;
      default:
        return this.errorWidget;
    }
  }
}

I have a question if I have a folder and within it I have another folder that has 3 images or video

can be filtered by user

I have a question, with this code can I download and display all images that are on a folder inside firebase storage? Example: I have one folder with 3 images, and I wanted to display all images inside this folder, in case 3 images.

yes you can.

That sounds great, I´m trying to do that, to download and show images inside a folder in FS. How the full process should be? Thanks in advance!

i am using firebase and store image in array[] multiple image how to retrive in our app in flutter send code

Hi I need your help in my code i can upload image to firebase storage but i cant download it from storage to a widget jus like profile picture of a user. Showing some path issue

Hello, what we need to put into .addListener((_, __) ?

I have a question, with this code can I download and display all images that are on a folder inside firebase storage? Example: I have one folder with 3 images, and I wanted to display all images inside this folder, in case 3 images.

good morning, how can this be done, i need the code please