Flutter – Upload files to Firebase Storage

Hi Friends,

Hope you are all well. In this post let’s see how to upload files to firebase storage from your flutter apps.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affiliate Link)

Let’s begin.


Code for this repo is available – here. (Leave a star to the repo if you found it helpful)

Now, just for a demonstration we’ll pick an image from the phone’s file system and try to upload it onto Firebase storage.

Since this is going to be a basic demo, I’ll remove the auth-check rule from Firebase storage (Not recommended).


Alright. I presume you already know how to configure firebase with your flutter app. If not then kindly watch this video once.

Now once you have done the configurations open up android -> build.gradle and add this snippet a the bottom of the file.

This is to fix a dependency error.

Now open pubspec.yaml and add the dependencies for firestore and image picker.

Now get back to main.dart. Add the code as shown below.

Here we are simply using the image_picker plugin to pick an image from the gallery and show it on our screen.

When you run the app you will see the below screen.


Tap on the FAB


Tap on allow to allow our app to access the gallery.


Choose an image. That’s it. You’ll see the image on the screen.


Alright. Now we have code to pick an image from our gallery. We need to upload this image to Firebase Storage right ?

Let’s add an upload button for that.

Open main.dart and add a button in our enableUpload() widget.

(Don’t forget to import firebase_storage as well).

I am simply creating a storage reference. (note that you can have directories in your firebase storage as any other file system and store your files under separate directories by choosing the path here in the reference).

Then I am simply uploading the file using putFile() method.

Now run the app and you’ll see the button.


Now tap on the upload button and open firebase storage in your firebase console. You should see the image uploaded there.

(It would be a better idea to add an alert/snackbar to show when the image upload is done).


That’s it guys. Now though I have just uploaded an image, you could upload files of any type into firebase storage.

Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.

Donate to keep this site alive – here.

(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).

Join our flutter community – here.

Thanks for reading. Peace..


Liked it? Take a second to support admin on Patreon!
  • Victor

    How to add a progressiveIndicator when the image start uploading and hide it when the image is succefully uploaded. That progr widget must be on top of the current ui. Please Sir Raja show me. It is the best user experience approch

  • Kurosh

    Hello, I have a question , Is possible use CallKit API in flutter?

    • shubham


  • Ooms Ooms

    Hello Raja Yogan, I like your flutter videos, they are excellent, and I want to ask you: How can I use DartBook in flutter?(
    ) Can I do it with a web-view in flutter? I would like to help me with this example, I want to be able to open:(
    ), in flutter.

  • flutter testing

    Thanks for the image tutorial.
    How can I do the following after putting the file to firebase storage?
    1) Check if the image already exists, if so, do not copy
    2) store the image link into Firebase collection document
    3) Get the link in second screen from Firebase collection document
    4) Use the link to display the image on second screen

  • W Seng Tong

    very helpful

  • Manu

    I am able to add only 1 image, and when I want to add another, it replaces the former image. How can I store all the images?