Adding Firebase to Your Flutter App

Andy Julow

Dec 3, 2020

Google's Firebase is a natural choice for a serverless backend for Flutter. In this article we will walk through the steps to connect Firebase to your existing Flutter project.

1. Create a Firebase Project

To begin you will need to have or create a firebase project. Head over to firebase.google.com and click 'Get Started'. Name your project and connect it to Google Analytics (optional).

2. Add Apps to your Firebase Project

Next, register applications for both Android and IOS on the main screen of your Firebase project. First, click on the Android icon to add an Android app. This will take you to a screen where you can register you app.

Enter your Android package name into the first field. You can obtain this from your Flutter app by going opening android/app/src/main/AndroidManifest.xml. The package name is near the top. Skip the optional fields for now (you can come back at a later time) and Click Register App to continue.

Download the google-services.json file from the next screen. At this point you can leave the screen by clicking the x at the top. The remaining steps are only applicable to a native application. You have completed adding an Android App to your project. Now let's move on to IOS.

Back in the main screen, click Add app again, this time selecting IOS. In the first screen you will be asked for your bundle id. To get this, open XCode, select open another project, navigate to your project and select /ios/Runner.xcodeproj

To get the bundle id, open XCode, select open another project, navigate to your project and select /ios/Runner.xcodeproj. The bundle id will be located below the Display Name on the general tab (Bundle Identifier). Enter this value in your Firebase screen. Skip the optional fields and click Register App

On the next screen download the GoogleService-Info.plist.

Drag the GoogleService-Info.plist file from the download location into XCode and place it inside the Runner folder. Click finish on the dialog that pops up. You have completed adding the IOS application to your firebase project. Skip the remaining steps in the firebase console, these are applicable to native applications only.

3. Add Gradle configuration

Next, you'll need to do some additional setup in the Android portion of your flutter applicaton. Open android/build.gradle and add the google-services dependency below the Kotlin gradle plugin.

    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:4.3.4'  // ADD THIS
    }

Now open the app level gradle file at android/app/build.gradle and apply the google service plugin below the kotlin plugin application.

  apply plugin: 'com.android.application'
  apply plugin: 'kotlin-android'
  apply plugin: 'com.google.gms.google-services'  // ADD THIS
  apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

Further down in the same file, check the minSdkVersion and set to 21 if not already.

        applicationId "com.example.firebase_add"
        minSdkVersion 21 //Set to 21
        targetSdkVersion 29
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName

Initialize Firebase in your Flutter Application

With Firebase core 0.5.0 it is now necessary to intialize the Firebase app in your Flutter Application. Open main.dart and modify the main function to include the two lines prior to runApp. Make sure you mark the function as async and import the Firebase Core plugin.


      import 'package:firebase_core/firebase_core.dart';
      import 'package:flutter/material.dart';

      void main() async {
        WidgetsFlutterBinding.ensureInitialized();
        await Firebase.initializeApp();
        runApp(MyApp());
      }

Your app should now be connected to your Firebase project. Add additinal plugins such as cloud_firestore, or firebase_auth to begin using Firebase services.