Firebase for Android

Getting Started

To get started, first we'll visit the Firebase Console at console.firebase.google.com. I'll direct you through creating a new project.

  • First, we'll select the Add Project button. We'll be prompted to give our project a name. In my project, I chose the name of Flutter DC.

  • Next, you'll be asked if you want to enable Google Analytics. I disabled this since we won't need Analytics to learn about how to use Firebase with Flutter. If you plan on shipping your app, it's recommended you turn this on. Once you continue, Firebase will create your project and you'll be taken to your own project's console.

Screen_Shot_2021-03-09_at_7.21.01_PM

Congratulations! You've just created your first Firebase project. It was that simple. Using the Firebase API's are just as easy too. However, configuring them to work with Flutter can take a little bit of work but follow along and this process will be much simpler.

Adding the Android Application

Inside your console, you'll be able to manage all the different applications that have access to the same Firebase data. This includes data like users, saved user data, and files for downloading and uploading. Since our Flutter application can run on both iOS and Android, we'll need to add both of those platforms.

We'll get started with adding the Android application. Click on the Android button and you'll be taken to a page titled Add Firebase to your Android app. This is where you'll register the Android version of your Flutter app to work with Firebase.

  • First, we need to enter the package name of the Android application. You can find this by navigating to the folder your project is saved in → android → app → build.gradle. This build.gradle file will contain your Android app's package name.

    Make sure that you are looking at the build.gradle file inside of the app folder and not the file with the same name outside of the folder.

  • Inside of this file, you will find the package name inside defaultConfig with the key of applicationId. In my file, I have a package name of io.designcode.designcode. I'll copy this package name and paste it back into the Firebase console.

Screen_Shot_2021-03-09_at_7.36.51_PM

  • Give your app a nickname to help identify it. I've simply chosen Android App as my nickname. Once you do that, be sure to click the Register App button.

Screen_Shot_2021-03-09_at_7.31.32_PM

  • Upon registration, you'll be asked to download a file called google-services.json. Make sure not to rename this file as you download it. This is a configuration file that has all the important data like keys and identifiers that help Firebase communicate with your app and make sure it's reading the data from your project and not someone else's project.

Screen_Shot_2021-03-09_at_7.32.24_PM

You can then click next and skip the remaining steps. These steps simply detail how to add Firebase to a pure Android application that may have been built in Java. For Flutter, there's a few extra steps which I will guide you through.

Configuring the App-Level Build.Gradle File

Swift back over to the build.gradle file from earlier making sure it is still the file within the app folder. We will need to apply some plugins and enable some settings to make sure we are not faced with any errors later on.

  • At the top of the file, underneath all of the def statements, we need add a new apply statement that will apply the firebase plugin.
apply plugin: 'com.google.gms.google-services'
  • Next, inside of the defaultConfig handler, the same handler which has our applicationId, we need to enabled multiDex. This setting simply allows Android applications to compile more instructions than the default which is needed if we are to import a lot of Firebase settings.
defaultConfig {
	applicationId "io.designcode.designcode"
	...
	multiDexEnabled true
}
  • At the very end of the file inside of the dependencies handler, I will need to add two more implementations. One confirming the Firebase dependency and the other confirming the multidex dependency.
dependencies {
	implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
	implementation platform('com.google.firebase:firebase-bom:26.3.0')
	implementation 'com.android.support:multidex:1.0.3'
}

Screen_Shot_2021-03-09_at_7.43.20_PM

Configuring the Project-Level Build.Gradle File

Now, we'll switch over to the other build.gradle file. This is the file outside of the app folder. Here, the change is very quick. All we need to do is update the dependencies handler inside of the buildscript. Here, we'll add a new classpath statement that enables Google services.

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"
}

Screen_Shot_2021-03-09_at_7.46.59_PM

Adding the Google-Services.json file

Also make sure to take the google-services.json file we downloaded from earlier and place it into the app folder. This is important as Firebase cannot function properly without this file in place.

Screen_Shot_2021-03-09_at_7.47.07_PM

Installing the Firebase Packages

All that remains is downloading the respective Firebase packages. If you remember from the previous course, we do this inside of pubspec.yaml.

Navigate to that file and underneath the slipinguppanel dependency, add the Firebase dependency.

firebase_core: ^0.7.0 

Click on the Pub get button afterwards to install the dependency. Note that since I am using Flutter 1.22, my package versions will be slightly outdated at the time of writing. Be sure to check which is the latest version of the Firebase package if you are running Flutter 2.0 or greater. The code should remain the same nevertheless.

Screen_Shot_2021-03-09_at_7.48.40_PM

If Pub get completes its process with no error (exit code 0), you can take a sigh of relief. You've managed to install everything correctly. If you are facing any issues, feel free to ask any questions on Twitter @Heysaik or on the Design+Code discord.

Testing our Firebase Implementation

Now that we have our packages installed and our Android app configured, we need to test our app to make sure that our app is communicating with Firebase's servers. Head over to the main.dart file. To test our implementation for Android, we just need to add two lines of code.

  • At the top of the file, import the newly install Firebase Core package.
import 'package:firebase_core/firebase_core.dart';
  • Inside of the main method, right before we call the runApp method, we need to ask Firebase to initialize our application. In other words, this means that we need to ask Firebase to start having its servers communicate with out application. We do this with the following line.
void main() {
  Firebase.initializeApp();
  runApp(MyApp());
}

If you run the app now, you will be able to see messages in the console like the ones I have below which signify that Firebase is successfully communicating with your application.

Screen_Shot_2021-03-09_at_5.57.14_PM