How to Use Firebase Storage in Flutter

In this tutorial, we’ll learn how to use Firebase Storage in Flutter to store and retrieve files. We’ll also learn how to access the device’s camera in Flutter and upload images to Firebase Storage. Lastly, we’ll display the images from Firebase Storage in Flutter.

Prerequisites

Before we jump into the code, there are a few prerequisites that need to be met:

• You will need a Firebase project. If you don’t have one, you can create one from the Firebase Console.
• You will also need to install the Flutter SDK on your machine. If you’re not familiar with Flutter, you can check out the Flutter website for more information.

Installing Firebase Storage into Your Project

Before we can use Firebase Storage in our Flutter project, we need to install the firebase_storage package.

To do this, open the pubspec.yaml file in your project and add the following line:

dependencies:
  firebase_storage: ^3.1.5

Once you’ve added the dependency, save the pubspec.yaml file and run the following command in the terminal:

flutter pub get

This will install the firebase_storage package into your project.

Accessing the Device's Camera in Flutter

To access the device’s camera in Flutter, we need to install the image_picker package.

To do this, open the pubspec.yaml file in your project and add the following line:

dependencies:
  image_picker: ^0.6.7+4

Save the pubspec.yaml file and run the following command in the terminal:

flutter pub get

This will install the image_picker package into your project.

Uploading Images to Firebase Storage in Flutter

Now that we’ve installed the necessary packages, we can start uploading images to Firebase Storage.

First, we need to create a reference to the Firebase Storage bucket. To do this, add the following code to your project:

final FirebaseStorage _storage = FirebaseStorage(
    storageBucket: 'gs://<your-firebase-storage-bucket>');

Replace <your-firebase-storage-bucket> with the name of your Firebase Storage bucket.

Next, we need to create a function that will upload an image to Firebase Storage. To do this, add the following code to your project:

Future<String> uploadImage(File imageFile) async {
  String fileName = 'images/${DateTime.now()}.png';
  StorageReference reference = _storage.ref().child(fileName);

  StorageUploadTask uploadTask = reference.putFile(imageFile);
  StorageTaskSnapshot storageTaskSnapshot = await uploadTask.onComplete;
  String downloadUrl = await storageTaskSnapshot.ref.getDownloadURL();
  return downloadUrl;
}

This function takes an image file as an argument and returns a download URL for the uploaded file.

Displaying Images from Firebase Storage in Flutter

Now that we’ve uploaded an image to Firebase Storage, we can display it in our Flutter app.

To do this, we need to create a NetworkImage widget and pass the download URL as an argument.

NetworkImage(
  imageUrl: downloadUrl,
)

Now, when the user taps the image, it will be displayed in the app.

Conclusion

In this tutorial, we’ve learned how to use Firebase Storage in Flutter to store and retrieve files. We’ve also learned how to access the device’s camera in Flutter and upload images to Firebase Storage. Lastly, we’ve displayed the images from Firebase Storage in Flutter.