How to setup Firebase with Flutter for iOS and Android Apps

Paul Halliday

Firebase is a great backend solution for anyone that wants to use authentication, databases, cloud functions, ads and countless other features within an app. Luckily for us, Flutter has official support for Firebase with the FlutterFire set of libraries.

As we’re dealing with iOS and Android platform(s), we’ll have to go through the setup process for both. Let’s start by ensuring we’ve got a Firebase project created over at https://console.firebase.google.com.

Creating a New Flutter Project

In order to follow along with the setup we’ll be creating an example Flutter app. Assuming you already have the Flutter and Dart SDKs installed, run the following in your terminal:

# New Flutter application
$ flutter create flutter_firebase

# Open this up inside of VS Code
$ cd flutter_firebase && code .

Now that we’ve got a Flutter project up and running, we can add Firebase.

Creating a New Firebase Project

From within the Firebase dashboard, select the “Create new project” button and give it a name:

Creating a new project

Next up, we’re given the option to enable Google Analytics. It isn’t directly necessary for what we’re trying to do, so do whatever feels right for your use-case here.

Firebase Analytics

Assuming that we’re using Google Analytics, we’ll need to review and accept the terms and conditions prior to project creation.


After a relatively painless setup process, we should now be navigated to the dashboard for our project.

Adding Android support

Step 1: Register app

In order to add Android support to our Flutter application, select the Android logo from the dashboard. This brings us to the following screen:

Adding Android support

The most important thing here is to match up the Android package name that you choose here with the one inside of our application. The structure of this is done like so: com.example.app.

Once you’ve decided on a name, head over to android/app/build.gradle and update the applicationId to match this:

defaultConfig {
    // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
    applicationId "io.paulhalliday.myapp"
}

You can skip the nickname and debug signing keys at this stage. Select “Register app” to continue.

Step 2: Download config file

The next step is to add the Firebase configuration file into our Flutter project. This is important as it contains the API keys and other critical information for Firebase to use.

Select “Download google-services.json” from this page.

Downloading the config file

Once you’ve got this, take the file and place it inside of the android/app directory within the Flutter project.

Step 3: Adding the Firebase SDK

We’ll now need to update our Gradle configuration to include the Google Services plugin. Open up android/build.gradle and modify it to include the following:

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.2'
  }
}

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

Finally, update the app level file at android/app/build.gradle to include the following:

apply plugin: 'com.android.application'

dependencies {
  // add the Firebase SDK for Google Analytics
  implementation 'com.google.firebase:firebase-analytics:17.2.0'
  // add SDKs for any other desired Firebase products
  // https://firebase.google.com/docs/android/setup#available-libraries
}
...
// Add to the bottom of the file
apply plugin: 'com.google.gms.google-services'

With this update, we’re essentially applying the Google Services plugin as well as looking at how other Flutter Firebase plugins can be activated such as Analytics.

From here, run your application on an Android device or simulator. If everything has worked correctly, you should get the following message in the dashboard:

Successfully added Firebase

Next up, let’s add iOS support!

Adding iOS support

In order to add Firebase support for iOS, we have to follow a similar set of instructions.

Head back over to the dashboard and select Add app and then iOS icon to be navigated to the setup process.

Step 1: Register an app

Once again, we’ll need to add an iOS Bundle ID which I’m keeping the same as Android for consistency:

Step 1: iOS

You’ll then need to make sure this matches up by opening the iOS project up in Xcode at ios/Runner/Runner.xcodeproj and changing the Bundle identifier under General:

Step 1: Bundle identifier

Click “Register app” to move to the next screen.

Step 2: Download config file

In this step we’ll need to download the configuration file and add this to our Xcode project.

Step 2: Downloading config

Download GoogleService-Info.plist and drag this into the root of your Xcode project within Runner:

Step 2: Adding configuration

It's important that you don't simply drag this into the folder without going through Xcode, as this will not work.

That’s it! You’ll also be happy to know that we can skip the rest of the steps from here on out.

Conclusion

We’ve now learned how to set up and ready our Flutter applications to be used with Firebase in the near future.

In future articles we’ll look at how to use Firebase features such as Cloud Firestore, Authentication, Analytics, and more with Flutter.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#