Adding Images to Firebase Storage and Cloud Firestore In Flutter
In this tutorial, we are going to look at how we can add an image file to Firebase Storage and Cloud Firestore. First we add image from the assets folder to Firebase Storage. Then add the path of those images in Cloud Firestore.
Prerequisites:
- A Firebase integrated Flutter project . If not follow this link to add Firebase to your app: adding Firebase
Adding Dependencies
For working with Firebase storage and cloud Firestore first we need to add following dependencies in pubspec.yaml(You can find it below the main. dart) file.
dependencies:
cloud_firestore: ^0.14.1+3
firebase_storage: ^5.0.0After adding dependencies save (ctrl + s)and run flutter pub get in your flutter project directory.
Adding Images to the Assets Folder
After adding dependencies, we need to set up our assets folder, because we are going to add images from the assets folder. For that purpose, we will need to add images to the assets folder. you can add images by drag and drop the images into the assets folder or simply copy-paste the images.
After adding images, your assets folder look like similar to my assets directory structure :
For the above changes to take effect we need to specify the assets folder and its subfolders to Flutter. we can do this by adding paths to pubspec.yaml file. Under assets, section add the path of the assets folder and its subfolders paths.
After adding paths of assets folder and its subfolders, my pubspec.yaml file look like this:
flutter: # To add assets to your application, add an assets section, like assets:
- assets/images/
Note: When specifying the path you need to add every path of sub folders. Since I have only one folder I only need to specify one path.
Setting Rules for Firebase Storage
After setting up images, let’s work on the Firebase console. In your Firebase console navigate to the Firebase Storage tab. Inside storage, navigate to the Rules tab and replace rules with the below Rules:
Note: Above rule indicates that anyone can read and write data to your storage, because we give access to all by adding
allow read, write: if true;. Except for testing purposes, it’s not a secure method to handle your storage, you have to modify the line of code to grant read access only to all except the owner of the code.
To explore more about Firebase secure Rules : follow this link
List down the Images
After defining the Storage rules, we need to list down all images which we are going to add to Firebase Storage. So let’s create a list, that consists of image path strings.
After doing the above step, here is my listOfImage:
Getting Image Name & Path
After completing above steps we are finished setup. In the next step, we have to loop through a defined list of images from the Firebase Storage as I mentioned in the last section. You can get the particular image path and name of the image by adding below code into the loop.
Loading Image File
In this next step, we are going to get the temporary system directory of our assets folder. A temporary directory is a directory that stores our app data on our devices for one session. For loading an image, we will use a predefined tool called rootBudle. The rootBundle contains the resources that were packaged with the application when it was built. By using the rootbundle, load an image as indicated in lines 3 and 4. After loading images, let’s convert images into bytes using the writeAsBytes method as indicated in lines 6 and 7.
Write to Firebase Storage
Now we have our images in bytes format. By using the putFile method in Firebase API, we can upload our images to Firebase Storage as indicated below. please note that it takes more time as images tend to be large files.
After adding images to Firebase Storage your directory structure look like this:
Note that when uploading images( > 1MB), it takes more time.
Get download URL and Add it to Cloud Firestore
Now we have our images in the cloud. But how do we display in our app. we can’t just retrieve and use images as other data. To use images, we want relevant image URLs, so that we can use them to retrieve images. In this step, we are going to save our URLs to Cloud Firestore. Since we get the relative path of the image, we can add URLs the same as our local assets directory structure. The first line gets the image URL from Firebase Storage and the second and next lines write the URL to Cloud Firestore.
Creating ‘NewScreen.dart’ .
Now let’s work on our Flutter app. Our goal is to add images when we press the floatingActionButtonbutton. For this purpose, we will create a simple screen with a floating action button as below. When we press the button, _addImages() method gets called and images will be added to Firebase Storage.
Full Code
Here is the full code that loop through listOfImage and get images and write to Firebase Storage and Cloud Firestore.
After doing the above steps, you can get image URLs from the images collection like any Other data. Hopefully, you enjoyed reading this guide on Adding Images to Firebase Storage and Cloud Firestore In Flutter. Further, we would love to answer your questions and welcome your comments below!
Full project :- Source code
References
