Flutter Community
Published in

Flutter Community

Working with Firebase Storage in Flutter — Part 1

Firebase is an efficient tool that provides a good back-end for mobile applications. Without bothering much about the back-end, one can develop and publish highly scalable applications. This feature of Firebase makes it really fascinating and many big organizations are nowadays using Firebase due to its flexibility, versatility, easy-to-use, and many other features.

Firebase is really in trend these days due to it’s numerous advantages and features.

Firebase Storage is a wonderful place for storage in the cloud. One can store any kind of data in the cloud through different kinds of apps like mobile apps, web apps, and desktop apps. Firebase Storage provides us an API which makes it really convenient for the developer to use. We can integrate Firebase Storage with Android, iOS, web applications and desktop applications. Also, Flutter is a great framework for building highly scalable applications with great UI in record time.

Here is an implementation that demonstrates how Flutter works with Firebase Storage. For using Firebase storage with Flutter, there is a flutter package named firebase_storage.

First of all, we will add the dependencies in pubspec.yaml file of our Flutter project.

Now, we will create a Firebase project and integrate that project with our application. Please refer to this link to do so.

First of all, we will implement the logical functions for performing upload operation in the Firestore storage from our application. We will import important libraries and declare our homepage as a StatefulWidget as shown below:

homepage.dart file initial setup

Now, we will implement the functionality for picking a file from the device. We will define a function _filePicker which will perform this function. We will be using the file_picker package of flutter. The implementation of this function is below:

Implementation of filePicker() function

In this function, it is clear that we are checking the type of file we need to upload and according to that, we are picking the file from the device along with keeping the exception handling in mind. After successfully picking the file from the device we are calling the _uploadFile() function which contains the main logic for uploading the files in Firebase Storage.

Now, we will implement the main functionality of our app i.e. uploading the file to Firestore Storage. To do so, we will define a function named _uploadFile() and we will be doing that using the firebase_storage package of flutter.

Implementation of _uploadFile() function

Now we are ready with our logical part of the application. So, we will design the UI of the application. The UI of any application depends upon the requirement. Here’s a demo UI which I have built for our application. Please refer the below code for that:

From the above code, it is clear that we are changing the value of the fileType variable by using the setState function in order to handle the file types we want to upload. After that for uploading the images we are first calling the _filePicker() method which is defined above.

Demo of the application

The app we have built will demonstrate how to upload the images in Firebase Storage. Here is the screenshot of main screen of the app we have built.

App Screenshot

Last Words

Firebase Storage is a convenient place to store the files of the app. This service by Firebase makes it really easy for developers to work with cloud storage. Firebase is a very powerful tool for mobile apps as well as for web apps, so any kind of apps can be made using Firebase. Along with Firebase Storage, Firebase comes with lots of features, functionalities, and tools which makes it convenient for the developers to build high performance and highly scalable apps.

There is a lot of scopes to work with Firebase Storage in this app which will be detailed in the upcoming articles of this blog.

Thanks a lot for being patient and do clap as much as possible if you liked this article. Keep Fluttering:)



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store