CODEWITHSUNDEEP
firebaseflutterdartgoogle-cloud-firestore
Theepag
Theepag

Reputation: 309

How can I get a image from Firebase storage with the file name I stored in the database?

I stored a image in firebase storage and image path in Firestore, how can I get that specific image using the path saved in Firestore?

  getImagePath() async {
    var document = await firestoreInstance
        .collection("products")
        .document(widget.productId)
        .get();

    String path = document["filePath"];
    setState(() {
      filePath = path;
    });
  }

I got the filename from Firestore like this, how can I get the image by using this file name?

Upvotes: 1

Views: 2502

Answers (3)

Furkan
Furkan

Reputation: 322

You can also use FirebaseImage widget

         CircleAvatar(
        backgroundColor: Colors.black,   
        backgroundImage:
   FirebaseImage('gs://yourapp=67791.appspot.com/images/cPW7zkbCpYQT2II7JqEOcUK5rOm2.png'),
                     )

Upvotes: 1

Shri Hari L
Shri Hari L

Reputation: 4913

I could give you an idea. Since you have commented that your filePath looks like this image_picker4011381564582645700.jpg, then you must be storing only the file names. Then, you can something like this with the help of firebase_storage 

String getStorageUrl(String fileName) async {
   
   String url = "";
   StorageReference storageReference = FirebaseStorage.instance.ref().child("folder/$fileName");
   url = await storageReference.getDownloadURL();
   return url;
}

Call the function, where you want it. Or in your case,

getImagePath() async {
  var document = await firestoreInstance
      .collection("products")
      .document(widget.productId)
      .get();

  String path = await getStorageUrl(document["filePath"]);
  setState(() {
    filePath = path;
  });
}

You could then use that URL in an Image.network() to display it, or if you have other plans with it, you can go for flutter_downloader.
Make sure, you are changing the function with the correct folder name. Hope that suits your case.

Tip: It is better to store the full URL to the database, instead of just saving the file name.

Upvotes: 2

Gopal Talaviya
Gopal Talaviya

Reputation: 1

NetworkImage() and Image.network() directly fetch image from given Firebase image storage

//To set image on background

CircleAvatar(
  backgroundColor: Colors.transparent,foregroundColor:Colors.blueAccent,
  radius:16,
  backgroundImage:NetworkImage(filepath),
  child: FlatButton(
    onPressed: (){
      print("button pressed");},
    ),
  ),

//within child 

Container(
   child:Image.network(filepath),
);

Upvotes: 0

Related Questions