Flutter + Firebase — Connecting/Integrating — Step By Step Guide

Introduction

When it comes to building mobile apps, Firebase is a powerful tool to manage the backend. With rising popularity, many developers want to implement Firebase to their mobile applications.

In this article, I will lead you through the steps to successfully integrate Firebase into your Flutter application.

Structure

1. Creating a Firebase project
2. Setting up and integrating a Firebase application
3. Checking if everything works

1. Creating a Firebase project

Step 1: Add project

Inside the Firebase dashboard, click the ‘Add project’ button.

Step 2: Enter a name

Enter a name for your Firebase project. It can be whatever name you like.

Step 3: Decide on Google Analytics

This step, let’s you decide if you want to activate Google Analytics for your project. Choose based on if you’re going to use Google Analytics or not. (for this project I will not enable it)

If you are finished, click on the ‘Create project’ button. After a short loading time, you can click ‘Continue’ and you will be directed to your Firebase projects dashboard.

Now we can begin with setting up our iOS and Android app.

2. Setting up a new application inside the project

Top of firebase project overview

To add a new application, click on the buttons shown above, depending on what app you want to add.

As Flutter compiles the code to native code for iOS and Android we have to set up two Apps. One iOS app and one Android App.

2.1 iOS setup

Step 1: Register App

In the first form field, we will enter our iOS Bundle ID. We can find this ID in Xcode in the General tab.

You can open Xcode from Android studio by executing following command inside the android studio terminal:

open ios/Runner.xcodeproj

The marked row is your iOS Bundle ID

In the second field in the firebase form, we can enter any name we want the application to have. We can leave the third form field empty.

Now you can click on the register app button.

Step 2: GoogleService-Info.plist

In the second step, we have to download the GoogleService-Info.plist file and add it to our Runner folder.

After the download is finished we have to drag the file into the right folder.

Drag it directly into Xcode under Runner/Runner otherwise, it will not work. (to open Xcode: open ios/Runner.xcodeproj)

After dragging it in, the window below appears. Make sure ‘Copy items if needed’ is checked.

Drag file to place where it is shown on the right image

You can skip all the next steps of the Firebase form. With this the setup of the iOS App is finished.

2.2 Android setup

Step 1: Register App

The first form field will be the package name, which you can find in your flutter project under android/app/src/main/AndroidManifest.xml.

The second form field is the app name. You can give the app whatever name you like.

For the last form field, we have to generate a debug signing certificate SHA-1. To create the debug signing certificate SHA-1, open your terminal and execute the following command:

If it asks for a Keystore password, the default password is android.

Mac:

keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

Windows:

keytool -list -v \
-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

After you did that, the terminal should output some certificate fingerprints. You should see the fingerprint for SHA1. Copy it and fill it in the last form field.

SHA1 certificate fingerprint

Step 2: google-services.json

For the second step, we have to download the google-services.json file and drag it into our flutter project under android/app.

Where to put google-services.json file

Step 3: Configuration

As the last step, we have to do a little bit of configuration in the android Gradle files.

First, we have to open the project level Gradle file in our flutter project under android/build.gradle. Once opened, add the following line at the position shown in the image.

classpath ‘com.google.gms:google-services:4.3.3’

This enables the Firebase services for our Flutter project.

After that, add the following line to the app level build.gradle file under android/app/build.gradle. Add the line at the very bottom of the file.

apply plugin: 'com.google.gms.google-services'

This step adds dependencies for basic libraries required for the Firebase services we have enabled.

Skip the next steps in the Firebase form and with this the Android setup is done.

3. Checking if everything works

Now we will check if everything worked as expected. For this we will set up a simple anonymous login function and see whether we can communicate with firebase.

Step 1: Activating Anonymus sign in

Go to your firebase project dashboard and select Authentication from the left sidebar menu.

Then go to ‘Sign-in method’ and select ‘Anonymous’. Once selected, toggle the enable button to enable anonymous sign in.

Step 2: Add dependency

Add the following line to your pubspec.yaml file under dependencies in your flutter project (Which enables firebase authentication to the project):

firebase_auth: ^0.16.1

After adding the dependency execute inside the android studio terminal:

flutter pub get

Step 3: Adding code

To trigger the signInAnonymously function, I built a tiny app with a button, which, when triggered, will execute the function.

Just replace the code inside the main.dart file with the following code:

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            height: 50,
            width: 100,
            child: FlatButton(
              color: Colors.amber,
              onPressed: () => signInAnonymously(),
              child: Text('Sign In'),
            ),
          ),
        ),
      ),
    );
  }
void signInAnonymously() async {
    try {
      final authResult = await FirebaseAuth.instance.signInAnonymously();
      print('${authResult.user.uid}');
    } catch(e) {
      print(e.toString());
    }
  }
}

Step 4: Executing the app

Start the app on your simulator or physical device and tap on the sign-in button. If the terminal prints out a userId, everything worked fine, and your app is successfully connected to firebase.

(If you run into any issues or unexpected errors please leave me a comment below so I can help you with that.)

Conclusion

As we have seen integrating Firebase into Flutter is not that difficult at the end.I myselfe struggled with setting up Firebase for Flutter in my beginnings. I hope this article helped you and made life easier.