Flutter / FireStore: how to display an image from Firestore in Flutter?

Question

I want to put some images that I use in my app to Firestore, and display them from there, rather than having them as assets, bundled in my app.

In order to do this, I came up with the following solution: for the item I want to display an image, I created a Firebase document, where I have a field that stores the name of the file that stores the corresponding picture:

document
- name
- description
- imageName

Then, I uploaded an image to FireStore with the same name.

When I want to display the image, I can successfully get the document via StreamBuilder, and extract the imageName property.

I also created the necessary FireStore references:

FirebaseStorage storage = new FirebaseStorage(
    storageBucket: 'gs://osszefogasaszanhuzokert.appspot.com/'
  );
StorageReference imageLink = storage.ref().child('giftShopItems').child(documentSnapshot['imageName']);

However, I can't seem to pass it to an Image.network() widget.

Is it possible to display an image the way I'd like to, or should I use a different Image provider?

Solution

You need the .getDownloadURL() from the StorageReference imageLink to get the storage URL link:

final imageUrl = await imageLink.getDownloadUrl();
Image.network(imageUrl.toString());