Flutter Load Image from Firebase Storage

Question

I see there are a lot of examples on how to upload an image using flutter to firebase storage but nothing on actually downloading/reading/displaying one that's already been uploaded.

In Android, I simply used Glide to display the images, how do I do so in Flutter? Do I use the NetworkImage class and if so, how do I first get the url of the image stored in Storage?

Answer 1

To view the images inside your storage, what you need is the name of the file in the storage. Once you've the file name for the specific image you need. In my case if i want the testimage to be loaded,

final ref = FirebaseStorage.instance.ref().child('testimage');
// no need of the file extension, the name will do fine.
var url = await ref.getDownloadURL();
print(url);

Once you've the url,

Image.network(url);

That's all :)

New alternative answer based on one of the comments.

I don't see anywhere google is charging extra money for downloadURL. So if you're posting some comments please attach a link to it.

Once you upload a file to storage, make that filename unique and save that name somewhere in firestore, or realtime database.

getAvatarUrlForProfile(String imageFileName) async {
final FirebaseStorage firebaseStorage = FirebaseStorage(
    app: Firestore.instance.app,
    storageBucket: 'gs://your-firebase-app-url.com');

Uint8List imageBytes;
await firebaseStorage
    .ref()
    .child(imageFileName)
    .getData(100000000)
    .then((value) => {imageBytes = value})
    .catchError((error) => {});
return imageBytes;
}

Uint8List avatarBytes =
    await FirebaseServices().getAvatarUrlForProfile(userId);

and use it like,

MemoryImage(avatarBytes)

Answer 2

update

In newer versions use

await ref.getDownloadURL();

See How to get full downloadUrl from UploadTaskSnapshot in Flutter?

original

someMethod() async {
  var data = await FirebaseStorage.instance.ref().child("foo$rand.txt").getData();
  var text = new String.fromCharCodes(data);
  print(data);
}

see Download an image from Firebase to Flutter

or

final uploadTask = imageStore.putFile(imageFile);
final url = (await uploadTask.future).downloadUrl;

In the later case you'd need to store the downloadUrl somewhere and then use NetworkImage or similar to get it rendered.

Answer 3

Here's an example of a stateful widget that loads an image from Firebase Storage object and builds an Image object:

class _MyHomePageState extends State<MyHomePage> {

  final FirebaseStorage storage = FirebaseStorage(
      app: Firestore.instance.app,
      storageBucket: 'gs://my-project.appspot.com');

  Uint8List imageBytes;
  String errorMsg;

  _MyHomePageState() {
      storage.ref().child('selfies/me2.jpg').getData(10000000).then((data) =>
                setState(() {
                  imageBytes = data;
                })
        ).catchError((e) =>
                setState(() {
                  errorMsg = e.error;
                })
        );
  }

  @override
  Widget build(BuildContext context) {
    var img = imageBytes != null ? Image.memory(
        imageBytes,
        fit: BoxFit.cover,
      ) : Text(errorMsg != null ? errorMsg : "Loading...");

    return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new ListView(
          children: <Widget>[
            img,
          ],
        ));
  }
}

Note that FirebaseApp initialization is handled by the Firestore class, so no further initialization code is necessary.

Answer 4

The way I did it to respect the Storage rules and keep the image in cache is downloading the image as a File and store in the device. Next time I want to display the image I just check if the file already exists or not.

This is my widget:

import 'dart:io';

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

class FirebaseImage extends StatefulWidget {
  final String storagePath;

  FirebaseImage({
    required this.storagePath,
  }) : super(key: Key(storagePath));

  @override
  State<FirebaseImage> createState() => _FirebaseImageState();
}

class _FirebaseImageState extends State<FirebaseImage> {
  File? _file;

  @override
  void initState() {
    init();
    super.initState();
  }

  Future<void> init() async {
    final imageFile = await getImageFile();
    if (mounted) {
      setState(() {
        _file = imageFile;
      });
    }
  }

  Future<File?> getImageFile() async {
    final storagePath = widget.storagePath;
    final tempDir = await getTemporaryDirectory();
    final fileName = widget.storagePath.split('/').last;
    final file = File('${tempDir.path}/$fileName');

    // If the file do not exists try to download
    if (!file.existsSync()) {
      try {
        file.create(recursive: true);
        await FirebaseStorage.instance.ref(storagePath).writeToFile(file);
      } catch (e) {
        // If there is an error delete the created file
        await file.delete(recursive: true);
        return null;
      }
    }
    return file;
  }

  @override
  Widget build(BuildContext context) {
    if (_file == null) {
      return const Icon(Icons.error);
    }
    return Image.file(
      _file!,
      width: 100,
      height: 100,
    );
  }
}

Note: The code can be improved to show a loading widget, error widget, etc.