Select and Upload images to Firebase Storage Flutter

Mercy Jemosop
2 min readSep 2, 2021

--

Select image from gallery and camera

Introduction

Cloud Storage is designed to help you quickly and easily store and serve user-generated content, such as photos and videos.

The first step is setting up your project and fire-base storage. Here is a tutorial link on fire base storage.

The final results we are aiming at is this, having an image uploaded from phone to firebase storage.

Firebase storage dependency. Add the dependency to your pubspec.yaml file. Check the latest version here.

dependencies:
flutter:
sdk: flutter
firebase_core: "^1.5.0"
firebase_storage: "^10.0.2"

Before we start using Storage we must first ensure we have initialized FlutterFire. This is usually done before any Firebase service is used. This step is asynchronous meaning flutterfire usage is prevented until initialization is complete.

await Firebase.initializeApp();

The initializeApp() method is asynchronous and returns a future. Update your main flutter function.

N.B You can change the rules on your storage to allow a user who is not signed in to upload files.

Now let’s create a new dart file to upload our files to storage

Step 1: import cloud storage package to our project.

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

Step 2:Create a storage instance by calling the instance getter on Firebase Storage.

firebase_storage.FirebaseStorage storage =
firebase_storage.FirebaseStorage.instance;

Step 3: To select image from gallery or camera, add path and image picker dependency to your application.

path: ^1.8.0
image_picker: ^0.8.4

reference:https://fabcoding.com/2020/06/08/adding-an-image-picker-in-a-flutter-app-pick-images-using-camera-and-gallery-photos/

Github Link to the project

The common error I encountered was:

Member not found on .pub-cache firebase storage, the solution which worked for me was upgrading flutter.

sdk: ">=2.16.1 <3.0.0"

Another one was an issue with kotlin version here is a stackoverflow link for the solution

Happy Coding!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

--

--

Mercy Jemosop

Software Developer. I am open to job referrals. connect with me on twitter @kipyegon_mercy