How to configure Firebase with a Flutter project

Flutter’s growing popularity in the field of mobile application development has offered a great UI building experience powered by the Dart programming languages. Flutter is destined to take center stage as one of the most robust and dynamic frameworks for mobile application development.; so, we ought to learn the features it holds.

Firebase is a powerful and popular cloud service that provides state of the art features, like Real-time database, Cloud storage, Firestore, authentication, hosting, etc. The amazing thing is that Firebase simplifies its integration in different programming frameworks.

This is part one of a two-part tutorial series. In this tutorial, we are going to bring Flutter and Firebase together to implement the Firebase storage service in the Flutter framework. The idea is to set up all the necessary Firebase configurations into the Flutter project in order to link Firebase services to the Flutter framework.

Click here for part two.

So, let’s get started!

How to create a Flutter project

First, we are going to create a Flutter project. For that, we must have Flutter SDK installed in our system.

You can find the steps to install Flutter in the official Flutter documentation.

After a successful installation, we can run the following command in our desired directory to set up a complete Flutter project:

flutter create firebaseImageUpload

Integrating Firebase configurations to Flutter

In this step, we are going to integrate Firebase services to our Flutter project, but first, we need to create a Firebase project.

The setup guidelines are provided in the official Firebase documentation for Flutter.

To create a Firebase project, we need to log into the Firebase and navigate to the Firebase console. There, we can simply click on ‘Add a project’ to get our project started.

A window will then appear that will ask you to input the project name. Here, we have kept the project name as FlutterUpload:

Now, we are going to set Firebase up for the Android platform. We need to click on the Android icon displayed in the screenshot below. This will lead us to the interface where we can register Firebase to our Flutter app project.

How to register Firebase to Android app

As the registration process is platform-specific, we are going to register for the Android platform. Once we click on the Android icon, we will be directed to an interface asking for the Android package name. In order to add the package name of our Flutter project, we need to first locate it. The package name will be available on the ./android/app/build.gradle file of your Flutter project. You will see something like:

com.example.firebaseImageUpload

Now, we just need to copy and paste it to the Android package name input field as shown below:

After that, we can click on the ‘Register app’ button which will lead us to the interface where we can get the google-services.json file. This file will link our Flutter app to Firebase google services.

We then need to download the file and move it to the ./android/app directory of our Flutter project. These instructions are shown in the screenshot below:

How to add Firebase configurations to native files in Flutter projects

Now, in order to enable Firebase services in our Android app, we need to add the google-services plugin to our Gradle files.

First, in our root-level (project-level) Gradle file (android/build.gradle), we need to add rules to include the Google Services Gradle plugin. So, we have to check if the following configurations are available:

buildscript {
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }
  dependencies {
    ...
    // Add this line
    classpath 'com.google.gms:google-services:4.3.4'
  }
}

allprojects {
  ...
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
    ...
  }
}

If the configurations are not available, we need to add them (as shown in the code snippet above).

Now, in our module (app-level) Gradle file (android/app/build.gradle), we need to apply the Google Services Gradle plugin. For that, we need to add the piece code (highlighted in the following code snippet) to the ./android/app/build.gradle file of our project:

// Add the following line:
apply plugin: 'com.google.gms.google-services'  // Google Services plugin

android {
  // ...
}

Then, we need to run the following command so that some automatic configurations can be made:

flutter packages get

We have successfully integrated the firebase configurations to the Flutter project.

How to enable Firebase storage

Since we are going to work with the Firebase Storage service provided by Firebase, we need to enable it on Firebase. To do that, we need to go to the Storage console in the sidebar menu of the Firebase project console interface. This will lead us to the Storage console:

We now need to click on the Get started button. As soon as we click on it, a Cloud Storage configuration dialog will appear as shown below:

All we need to do is follow the instructions and click on Next until the Done button comes up. Clicking on Done will enable the Firebase Storage service:

The storage service is enabled, but we can’t write on the storage; we can only read from it. For that, we need to modify some storage rules in order to make it available for writing as well.

How to modify Firebase Storage rules

We need to go to the Rules tab to modify a rule:

In the editing interface, we just need to remove a tiny bit of conditional code. To be precise, we need to remove the condition if request.auth ≠ null. The editing interface should look something like:

To save the rule after modification, click Publish. Now we can write to Firebase Storage as well.

We have configured the Firebase to our Flutter project as well as enabled the Firebase storage service. It’s time to start implementing our Flutter app!

Conclusion

I hope this step-by-step guide will help you get your Firebase configuration to Flutter and your Firebase storage ready for the next chapter.

The next shot is going to be about UI and functionality.