Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

dart - Flutter Load Image from Firebase Storage

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Firebase Console

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)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...