Posted  by  admin

Flutter Download File From Firebase Storage

Earlier we have been throughStep by Step guide to implement Firebase with Flutter so in this article, we will learn about How to Get a Download URL From Firebase In Flutter.

  1. Flutter Download File From Firebase Storage Android
  2. Firebase Store
  3. Flutter Download File From Firebase Storage Download
  4. Firebase Storage Flutter Example
  5. Firebase Flutter Dev
  6. Flutter Download File From Firebase Storage Download

Support me - my course - further details - http://tph. Once you have a reference, you can download files from Cloud Storage by calling the getBytes or getStream. If you prefer to download the file with another library, you can get a download URL with getDownloadUrl. Download in memory. Download the file to a byte with the getBytes method. This is the easiest way to.

Are you as excited as us?

Let’s Discuss the same.

How to Get Download URL From Firebase In Flutter?

Firebase Storage is used to store images uploaded by the user from a Flutter Mobile Application. Users need to put

in pubspec.yaml file and import package

into the Dart File. Users can give try to below code.

URL looks like the below:

User can create a function like the below:

Future will look like the below:

Users can also give try to the below code.

If you are

then upload it.


Thanks for being with us on a Flutter Journey !!!

Keep Learning !!! Keep Fluttering !!!

Still, Need a Support for Flutter Development?

We would love to assist you. is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc. is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

In this article, we will use Firebase Storage to add images and retrieve them, we will also connect the images with Firestore.

  • Implementing Multiple Select in GridView

Get Started With Firebase Storage

This is the fifth article related to Firebase in Flutter, you can check the previous articles in the below links:

To know how to download the google-service.json file, you can check the first article in the above list. In this article, I will add images to the assets folder, so we can then add those images to Firebase Storage, link them with Firestore and then retrieve those images, and we will also use the image picker plugin to get an image from gallery and save it to Firebase Storage.

Add Firebase Storage To Flutter

Flutter Download File From Firebase Storage

As I said before, to check how to create a flutter project and add the google-service.json file which is used for android, then please check this article Get Started With Firebase in Flutter. Next, you need to add the following dependency to the pubspec.yaml file:

Click CTRL + S to save, and you have successfully added Cloud Firestore + Firebase Storage to your Flutter application!

Important Note: This tutorial is written using null safety, therefore when you create a project execute dart migrate --apply-changes to migrate to null safety.

Also, since we are not using Firebase Authentication, you need to change the rules for Firebase Storage to public:

But only use the above rules in the development phase and not in production.

Note : I would advise to read the previous articles related to Firebase with Flutter before this one.

Adding Images to Flutter

So, since we are going to use images inside the assets folder and add them to Firebase Storage, therefore first we can create a folder called images under the assets folder and inside the images folder we can add the images.

Then to access them inside the Flutter application, we need to declare them inside the pubspec.yaml:

Now, you can access all images inside the assets/images/ in your application.

Implementing Multiple Select in GridView

To display those images inside the Flutter application, we can use a gridView widget. So first inside the main.dart file, create a StatelessWidget that will call a StatefulWidget:

So main() method will be called first and, it will call the runApp() method which will take a widget and make it the root widget. The build() method will contain the layout of the application. The home property will take a widget, in this case we created a StatefulWidget called myHomePage. Then we need to declare this widget:

So myHomePage extends StatefulWidget, we override the method createState and create a State class called _myHomePageState. In the State class we declare the following variables:

We first create an instance of FirebaseStorage:

Also, we create a list of images, that will contain our images. The State class contains the initState() method which is called once when the StatefulWidget is loaded, therefore override the initState() method:

getImages() will retrieve all the images inside the assets/images directory and adds them all to the listOfImage. Then inside the build() method we add the GridView.builder widget:

So here the itemCount will take the number of images inside the list. The SliverGridDelegateWithFixedCrossAxisCount will design the gridView so on every line we will have 3 images. The mainAxisSpacing and the crossAxisSpacing is the number of logical pixels between each child.

Creating The GridView

So now inside the callback (BuildContext context, int index), we return a GridTile widget:

Let’s explain step by step here, first the GridTile takes a Material child, and then the Material widget takes a GestureDetector widget, which we will use to detects gestures. Then inside the GestureDetector widget, we use the onTap property:

So inside the onTap() we use the setState() which will rebuild the layout by calling the build() method. We first check if the listOfStr contains the image, if it does then we remove it from the list, and if it doesnt contain then we add it to the list.

So here the user is tapping on the image, if the image is already tapped then it is inside the list, if the user taps again then we remove it from the list and build again. Now we use the child Stack inside the GestureDetector. The reason we use Stack is because we want to add an icon if the user chose an image. We also use the ternary operator to check if the image is inside the list or not. Check the image below, to see how the layout would be:

So as you can see, when we select an image, we use the Opacity widget and decrease the opacity and we also add a check icon.

Adding Images to Firebase Storage

So to add the selected images to Firebase Storage, we can create a ElevatedButton to save the images to storage:

We wrap the ElevatedButton inside a Builder because we want to use a Snackbar later, which contains Scaffold.of(context), without the Builder method then the Scaffold widget will not be inside the context.

So since we might select multiple images, then we iterate inside the listOfStr and retrieve the name of the images, then we get the temporary directory inside the phone OS. We also use the rootBundle which is a top level property inside the AssetBundle and we use load() to retrieve a binary resource from the asset bundle as a data stream. After that we create a new file inside the temporary directory, and we write the bytes to the file. Then we can finally save the images to Firebase Storage:

ref() will give you a reference to Firebase Storage, child() will create a folder called images and inside of the folder we will have all the images, lastly putFile() will take the file as an arugument and add it to Firebase Storage. We use await to wait until it adds the image to storage and then continue execution.

Linking Firebase Storage With Firestore

Flutter Download File From Firebase Storage Android

After calling putFile() method, we can check if the image were successfully added or not:

If there is no error, then we successfully added the image to Firebase Storage, we can then use getDownloadUrl() which returns Future<dynamic> and thats why we use await. The getDownloadUrl() will give us the url of the image inside Firebase Storage. After that we can finally add both the url and the image to Firestore, inside the images collection. We also assign isLoading to false to stop the CircularProgressIndicator() from loading. The CircularProgressIndicator() is used inside the Column widget:

Retrieving Images From Firestore

So, to retrieve the images we create another ElevatedButton:

onPressed of the button we, navigate to the SecondPage. Therefore we create another dart file and call it second_page.dart. Inside the State class in the we retrieve an instance of Firestore:

Then we use a FutureBuilder to get the images and add them in a listView:

So in the FutureBuilder we use the method getImages() which will return all the documents inside the collection images. Then we use the ConnectionState, if the connectionState is equal to done, then the asychronous operation is finished. If it is equal to none then the operation finished but didnt return anything. Outside the if/else we return CircularProgressIndicator(); which will before getting the result from the Future.

<img src=”/assets/images/fireimage-min.jpg” loading=”lazy” alt=”firebase storage flutter”

Using Image Picker Plugin

The second way to add images to Firebase Storage, is to get an image from the gallery, so to do that, navigate to the pubspec.yaml file and add the following dependency:

Then in the second_page.dart, add a ElevatedButton below the FutureBuilder:

onPressed it will call the method getImage:

Firebase Store


The getImage() method will get an image from gallery, and call setState to rebuild the layout. Therefore under the ElevatedButton we add the image:

Flutter Download File From Firebase Storage Download

Under the image, we create a ElevatedButton and save the data to Firebase Storage under folder image:

Deleting an Image

Now, let’s say you have users in your application, each user will have a profile image, if a user gets deleted then you want to delete the image also from Firebase Storage. In that case you can do the following, for example:

Firebase Storage Flutter Example

Using getReferenceFromUrl() you will get URL pointing to a Firebase Storage location, and then you can call delete().

Firebase Flutter Dev

You can find the source code here: Firebase Storage Tutorial

Flutter Download File From Firebase Storage Download

I hope you enjoyed this Flutter/Firebase article, in the next article I will use Firebase messaging.