How to show the image downloaded from the firebase storage always in a flutter application statically, can be opened and viewed on a click.
I have already uploaded an image from camera and gallery to firebase storage. Now I want to download the image from the firebase storage and make a provision that the images downloaded will be readily stay in the application without disappearing.
I mean when ever user visits that flutter application screen, the image or images downloaded should be shown.
Uploaded the image using using firebase storage:
final FirebaseStorage _storage =
FirebaseStorage(storageBucket: 'gs://flutter-imageupload-cb66a.appspot.com');
StorageUploadTask _uploadTask;
_startUpload() async {
String imagePath = 'DeviceImages/DeviceImage${DateTime.now()}.png';
final StorageReference storageReference = FirebaseStorage().ref().child(imagePath);
final StorageUploadTask uploadTask = storageReference.putFile(imageFile1);
await uploadTask.onComplete;
_addPathToDatabase(imagePath);
print("Image uploaded");
setState(() {
_uploadTask =
_storage.ref().child(imagePath).putFile(imageFile1);
});
}
used firebase_storage: ^3.1.6
and firebase_database:
used image_picker: ^0.6.7+17
for picking the image from camera and Gallery.
To download an image from firebase storage, try the following:
final StorageReference storageReference = FirebaseStorage().ref().child(imagePath);
final UploadTask uploadTask = storageReference.putFile(imageFile1);
uploadTask.then((res) {
res.ref.getDownloadURL();
});
UploadTask
extends the Future
class therefore you can use then()
which registers a callback which will be called after the future returns a result. Then you will be able to get the url
using the method getDownloadUrl()
.
Once you have the url
you can use CachedNetworkImage
class and do the following:
CachedNetworkImage(
imageUrl: imgUrl,
);
You need to download the package first:
https://pub.dev/packages/cached_network_image
Check the guide here on how to display images from the internet: