How to display an image in flutter which is stored on Firebase Storage but it has a link which upon clicking downloads the image

user_13461228 0
Viewed 45
final Model.User user = Provider.of<UserProvider>(context).getuser;
CircleAvatar(
    backgroundImage: NetworkImage(user.photoUrl),
),

The user is got from Firebase Auth. It has a property 'photoUrl' which is a link to the profile photo of the user stored in Firebase Storage. When this link is clicked in the Firebase console, It directly downloads the image onto my computer.

The error I get using NetworkImage is:

Failed to load network image. Image URL:https://firebasestorage.googleapis.com/v0/b/instagram-66769.appspot.com/o/profilePics%2FoJKTbPWZHhPVeHjsXADJPCcSHb42?alt=media&token=7a450efa-345d-40b3-a57e-c0af81303fff

The above URL is what User.photoUrl provides.

What could I use other than NetworkImage?

firebase-storage firebase dart flutter
1 Answers

First, you have to store the image URL like this.

final Reference firebaseStorageRef = FirebaseStorage.instance
            .ref()
            .child('folderName')
            .child("imageName with it's file extension");
await firebaseStorageRef.putData(await (yourimage as File/Xfile).readAsBytes());
final String? imageURL = await firebaseStorageRef.getDownloadURL();

And after that, you can use imageURL in Image.network() or any other Network image widget.

Also make sure you used File type or XFile type yourimage in the above code.

user_117901810
Related