Beginning FlutterFire

As you know, images speak a thousand words! You will now give your users the ability to add and retrieve images from the cloud leveraging another flutterfire service.

Firebase Cloud Storage provides a remote file repository to your apps: you can easily upload and retrieve files of any kind, including images, audio and video files, storing them in the Cloud provided by Google. These files can then be shared and used based on your app’s features.

Like with the FireStore database, you can also control access and set rules that integrate with Firebase Authentication, so you can decide who can access the files you store in the Cloud.

You can setup you cloud storage bucket from the Firebase console, so get to your Firebase console. From there, click Storage, then get Started.

Since you’ve already selected a location for your firestore database, Cloud Storage will use the same location. This creates a default bucket, but you can also use multiple buckets for larger projects.

Now, back to the project, as usual, the first step to use this service in your project is adding the dependency in your pubspec. The required flutterfire plugin is called firebase_storage. So, from the terminal, type:

flutter pub add firebase_storage 

There’s another package that we’ll add to the project: as we want to store images for the activities we store, we’ll get images from the device gallery: the package we’ll use for that is called image_picker: so, type

flutter pub add image_picker  

to add this package to the project. The last step to complete our setup is creating a FirebaseStorage instance. We’ll use our FirebaseHelper class to deal with storage as well, so open firebase_helper.dart. At the top of the file, import firebase_storage as firebase_storage:

import 'package:firebase_storage/firebase_storage.dart' as firebase_storage; 

Then, at the top of the FirebaseHelper class declare a late firebase_storage and call it storage:

late firebase_storage.FirebaseStorage storage; 

Then in the FirebaseHelper constructor, set storage to take firebase_storage. FirebaseStorage.instance;

storage = firebase_storage.FirebaseStorage.instance; 

The FirebaseStorage instance is the entry point for any action on your files, so you should always get a FirebaseStorage instance before uploading or downloading files from the cloud. OK, let’s see how to upload your first image to the Firebase Storage next!