[Flutter App Dev] – Setting Up Firebase

If you are just getting into mobile development with Flutter (or mobile development in general) let me introduce you to Firebase. It is a service that offers a tonne of features such as free push notifications, analytics, Authentication etc. It even has some paid services (free tier is still quite impressive) for database hosting, file storage, and SMS service for phone authentication etc.

In this post, I will show you how to set this up for a flutter project. To keep this post short and to the point, I will assume you have already created your flutter project.

Firebase Setup

As a prerequisite, all you need to do is go to the Firebase Website and sign up for an account and log in.

Step 1 – Add a Firebase Project

Go to the Firebase Console and click “Add Project”

Step 2 – Give the Firebase Project a Name

The name you enter here is used to identify your project on Firebase. You can optionally edit the “Project ID” field, as this is used to reference your Firebase endpoint.

Accept the terms and then press “Create Project”

Step 3 – Create Application Projects in Firebase

This step is broken up into two sections: Android project setup and iOS Project Setup.

Setup a Firebase Android Project

On your Firebase Console, click the Android button to start the process of adding an Android application to your project.

Step 1 of this process is the most important, your “Android package name” must match the identifier you set on your Android project and is normally in the format of com.companyname.applicationname.

The app nickname is once again only used to identify your android project within your Firebase project.

Please refer to this post on how to find the SHA-1 fingerprint of your debug key. It is not so important for now, but when you come to release your application, you will need to add the SHA-1 fingerprint of the keystore file you use to sign and distribute your app.

Once you click “Register App” you will be taken to step 2. Simply download this file (google-services.json) and place within the Android -> app folder of your Flutter Application.

google-services.json file placed in the correct location for a Flutter app.

Step 3 is where you add the dependencies for your Android application. This step on the Firebase example is a bit miss-leading as the line for including Firebase core is not needed. This is because, when you add one of the Firebase libraries it will manage this include for you. Including this line manually will just cause compiler errors.

Therefore, setup is as follows:

Of course, use the version number for google-services as described by the Firebase project setup wizard that is on your screen.

Now refer to “Add Firebase to the Flutter Application” below or continue to “Setup a Firebase iOS Project”.

Setup a Firebase iOS Project

Click the iOS icon or the “Add App” button (if you followed the above Android steps). In my case, I have the Add App button (be sure to select the iOS option that appears.)

Fill out the details for step 1. Note that the “iOS bundle ID” must match exactly what you set in your iOS project. Your “App Store ID” requires you to have enrolled in the Apple Developer Program 
(which has a cost!) and have your app uploaded on iTunes connect.

However, this is optional for now, but remember to add it to your project’s settings before you release your application.

Next, in step 2, download the GoogleService-info.plist file and place it in the iOS project of your Flutter project. Below is an example of where I placed mine (in the ios -> Runner folder).

Placement of the GoogleService-info.plist file for a Flutter iOS App.

You can skip step 3, as including a FlutterFire library into your flutter application will already do this.

Follow instructions for step 4 as described by the Firebase steps precisely for your chosen language (Objective-C / swift).

Now refer to “Add Firebase to the Flutter Application” below.

Step 4 – Add a Firebase library to the Flutter Application

Providing you followed the steps for placement of the Google service files in the previous two sections, all you need to do for this is add any FlutterFire plugin to your Flutter project’s “pubspec.yaml” file.

FlutterFire plugin “firebase_ml_vision” included in the “dependencies” section of the pubspec.yaml file example.

Finally, deploy and run your application to the device and you should see the successful message stating your app has communicated with the Firebase servers. Note, that this message appears on the last step of each application setup of your Firebase project, within the Firebase
Console.