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.

![flutter firebase storage](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover13.jpg)
## 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](https:&#x2F;&#x2F;console.firebase.google.com&#x2F;).
- 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](https:&#x2F;&#x2F;flutter.dev&#x2F;) for more information.

## Installing Firebase Storage into Your Project

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

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

&#96;&#96;&#96;yaml
dependencies:
  firebase_storage: ^3.1.5
&#96;&#96;&#96;

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

&#96;&#96;&#96;
flutter pub get
&#96;&#96;&#96;

This will install the &#96;firebase_storage&#96; package into your project.

## Accessing the Device&#x27;s Camera in Flutter

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

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

&#96;&#96;&#96;yaml
dependencies:
  image_picker: ^0.6.7+4
&#96;&#96;&#96;

Save the &#96;pubspec.yaml&#96; file and run the following command in the terminal:

&#96;&#96;&#96;
flutter pub get
&#96;&#96;&#96;

This will install the &#96;image_picker&#96; 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:

&#96;&#96;&#96;dart
final FirebaseStorage _storage = FirebaseStorage(
    storageBucket: &#x27;gs:&#x2F;&#x2F;&lt;your-firebase-storage-bucket&gt;&#x27;);
&#96;&#96;&#96;

Replace &#96;&lt;your-firebase-storage-bucket&gt;&#96; 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:

&#96;&#96;&#96;dart
Future&lt;String&gt; uploadImage(File imageFile) async {
  String fileName = &#x27;images&#x2F;${DateTime.now()}.png&#x27;;
  StorageReference reference = _storage.ref().child(fileName);

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

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 &#96;NetworkImage&#96; widget and pass the download URL as an argument.

&#96;&#96;&#96;dart
NetworkImage(
  imageUrl: downloadUrl,
)
&#96;&#96;&#96;

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.

How to Use Firebase Storage in Flutter

About

Legal

Products

Resources

Category: