🤔 Did you know ?
In the old days, if people wanted to store images into Firebase, they would Base64 encode these images into massive strings, and then try and save them that way.
This wasn’t very efficient. But these days, we’ve got Firebase Storage, which lets you store and retrieve large pieces of user-generated content like photos, music, and movies all without needing your own servers.
Sound intriguing?
Stick around & find out how !!
Content
Adding Images to Firebase Storage
Linking Firebase Storage with Firestore
Retrieving Images form Firebase Storage
Setting Up !
STEP 1 : Go through this on how to add Firebase to your projectLinking Firebase Storage With Firestore
Firebase Storage
STEP 2: Include this plugin in dependencies in pubspec.yaml
firebase_storage :
Firebase Storage lets you store and retrieve user-generated content like images, audio, and video, all without the need of a server.
Features of Firebase Storage
- Firebase storage API lets you upload your users’ files to our cloud so they can be shared with anyone else!
- And if you have specific rules for sharing files with certain users, you can protect this content for users logged in with Firebase authentication.
- Security, of course, is the first concern. All transfers are performed over a secure connection.
- All transfers with API are robust and will automatically resume in case the connection is broken. This is essential for transferring large files over slow or unreliable mobile connections.
- And, finally, storage, backed by Google cloud storage, scales to petabytes — that’s billions of photos — to meet your app’s needs. So you will never be out of space when you need it.
Demo Application
We will develop a simple profile application in which we will see how to pick images from the image library and also, see how to store, retrieve & delete the selected images on Firebase. To perform these actions, I shall be using these plugins. Do these plugins in dependencies in pubspec.yaml
image_picker :
firebase_storage :
Linking Firebase Storage With Firestore
We will be importing these packages —
import 'package:image_picker/image_picker.dart';
import 'package:firebase_storage/firebase_storage.dart';
Adding Images to Firebase Storage
We can use image picker to get our images from gallery.
So to add the selected images to Firebase Storage, we can create a edit icon to save the images to storage uploadPic
https://gist.github.com/Anirudhk07/7098562bad53ecbdb27b566cd54d1810#file-upload-dart
Linking Firebase Storage With Firestore
After onComplete property, we can check if the image were successfully added or not:
https://gist.github.com/Anirudhk07/795ede5a5509c5fcc7444437bad8f1e3#file-link-dart
Saving Images form Firebase Storage
We can use a raised button to retrieve our images that we uploaded which on pressed
RaisedButton(
child: Text("Save Image"),
onPressed: () async {
if (_image != null)
{
StorageReference ref = FirebaseStorage.instance.ref(); StorageTaskSnapshot addImg = await ref.child("image/img").putFile(_image).onComplete;
if (addImg.error == null) { print("added to Firebase Storage"); }
} }),
Deleting Images
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:
https://gist.github.com/Anirudhk07/bfc2075bba24cce47376cf07cdc8cb6b#file-delete-dart
You can visit the whole code over here —
flutter-devs/Flutter-Firebase-Storage
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build…github.com
Happy Fluttering!
Resources
firebase_storage | Flutter Package
A Flutter plugin to use the Firebase Cloud Storage API. For Flutter plugins for other Firebase products, see README.md…pub.dev
image_picker | Flutter Package
A Flutter plugin for iOS and Android for picking images from the image library, and taking new pictures with the…pub.dev
