firebaseflutterdartfirebase-storageimageurl

How to show the image downloaded fom the firebase storage always in a flutter application statically,can be opened and viewed on a click


My application screenshotHow 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.


Solution

  • 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:

    https://flutter.dev/docs/cookbook/images/network-image

    https://flutter.dev/docs/cookbook/images/cached-images