In Flutter how do I show offline images from Firebase using CachedNetworkImage?

Question

I'm trying to make my Flutter app work offline with Firebase. I store a reference to my images on Firestore and the image files on Storage. I got the Firestore part working, and I'm using a CachedNetworkImageProvider to display my images, which caches for offline use. But when I'm offline, even though the image is cached, I can't get the URL for the image, so I can't pass it to CachedNetworkImageProvider, which uses the URL as the key.

So while offline I know the image path, and I have the file stored on device, I just need a way to get the URL.

Do I need to manually store the download URLs from Storage on the device so that I can use them offline? Or is there a better way?

Code to get the URL:

// this doesn't work offline
category.url = await storage
    .ref()
    .child("category_images/drawable-${DeviceInfo.dpiString}")
    .child(document.data["media"]["src"])
    .getDownloadURL();

Code to display the image:

image: new CachedNetworkImageProvider(_category.url),

Solution

You need to save the URL too. A good place could be in that image reference you have in firestore.

The other option is to use the local file since you say you know the path, though I think referring through the URL is cleaner.

Comments

[Ricardo Smania]

I thought I shouldn't save the URL because of the token, but your answer made me dig dipper and I found out that the token is actually related to the content, not the user or the date, that means I can store and use it. I'll accept you answer. Thanks!