Friday, 27 September, 2019 UTC
Summary
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:
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.
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:
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.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:
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:
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: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.
Download
GoogleService-Info.plist and drag this into the root of your Xcode project within Runner: 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.