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:

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:

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: