Firebase Setup for Flutter

Introduction

Firebase is a set of backend cloud computing services and application development platforms provided by Google. It hosts databases, services, authentication, and integration for a variety of applications, including Android, iOS, Javascript, Node.js, Java, Unity, PHP and C++.

Prerequisite

1. Ensure that you have installed Flutter sdk into your machine, to get started in installing Flutter head on to Flutter Documentation

2. Ensure you have installed your favourite integrated development environments (IDE) such as Android Studio or Visual Studio code head on to VisualStudio or Android Studio.

Firebase Setup

The application uses the firebase as its backend hence we will need to configure it in our application. To set up the Firebase head to Firebase you will be redirected to a page like this one.

Click on Get Started you will be prompted to log in with Google if you are not yet logged in to any Google account in your browser.

Click on Create a Project to create your first Firebase app you will then be navigated to a page to fill out the details of your Firebase app enter the name of the project can be any name of your choice and agree to the terms then hit continue.

Leave everything as it is in Step Two of the project setup as it is and hit on the continue button.

In step three select the default account for Firebase and click on the Create Project button.

Click continue to proceed to the next setups

You have now finished creating your Firebase app, you will see the following page after successfully creating a Firebase app.

Now we need to establish a connection between the Flutter project and the Firebase app that we have created, as you can see from the above image you can connect the Firebase app with the ios, android, Web Unity or Flutter, for our case we will go with the android option first. Click the second icon below the get started by adding Firebase to your app.

For Firebase to communicate to your Android app it needs a package name of your app for our case the Flutter application To get the package name open the Flutter project with the Android studio.

On the left side, bar click on the project the sidebar will expand click on the project name it will expand click on the file name android, then click on the app file, then on the src file, click on the main file you will see a file named AndroidManifest.xml double click on it locate package=”com.yourappname.com” at the top of your file copy the text in the quotes, for instance, the com.yourappname.com.

Go back to the browser and paste it into the Android package name field, you can skip the app nickname. We need to generate the sha1 key since our app will be using Google Sign-in as one of the signing methods Head on to Generate sha1 to copy the command that we will use to generate the sha1 key.

On the page Scroll until you get to the To get the debug certificate fingerprint: copy the command based on your operating system then head to Android studio, on the bottom bar click the terminal and paste the command you have copied and click enter key, type android when prompted to enter the password and hit enter.

Locate the sha1 in the terminal as highlighted in the image for instance B1:FD:65:48:65:ED:15:7D:25:0E:66:A5:A3:9E:D8:EF: A2:62:D0:F5 copy it and he'd to browser in our firebase project and paste it in the Debug signing certificate SHA-1 field, then click the register app button.

You will be redirected to this page after the previous step, click Download google-services.json after downloading locate the file in your file system copy the file by right-clicking on it and pressing copy option head to your Android Studio and paste it into the app folder by light clicking the app folder and pressing the paste option, should appear as the screen shown below.

Head back to the browser and click the next button, Your browser page will look like the image below

Copy the com.google.gms.google-services from step one head to Android Studio and navigate by clicking the android folder, you will see a file named build. gradle double click it and locate

dependencies {

classpath 'com.android.tools.build gradle:7.1.2'

classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

}

Type classpath “com.google.gms.google-services” between the curly braces final output should look like

dependencies {

classpath 'com.android.tools.build gradle:7.1.2'

classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

classpath 'com.google.gms:google-services:4.3.15'

}

Press control + c or command + c to save the file.

The final step in connecting with Firebase head back in the browser and in step two copy >

com.google.gms.google-services navigate back to Android Studio click the Android folder then the app folder then double click on the build. gradle file and locate

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

Below the second apply type apply plugin ‘com.google.gms.google-services and Press save final look should look like

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

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

Head back to the browser and press next then click the continue to console button You will then be redirected to the below page you can see the app is now connected to our application.

Our Flutter application now can communicate with the Firebase application, now we need to configure how the data will be stored in the Firebase and the authentication methods for the application. From the above image in your browser click the Build option it will reveal more options click the Authentication option, and your page will look like below click Get Started

We need now to set up our Signing method for our case the users will be login in with their phone number or Google, so let's start by setting the phone option click the phone option on the page a new page will appear on top, and click enable switch button then save button.

The phone Authentication method has been enabled, Click Add new Provider then select the Google option click on the Enable button then in the support email for project select your email address then click the Save button.

We are now done with setting authentication methods. Let's now set the storage which will be responsible for storing the images from our application. Click the Build option again and select Storage, then click Get Started leave everything as it is and click next in the cloud storage location select a region that is near to you then click Done after success set up you will see a page like the one below, click on the rules option edit the line

allow read, write: if false; to allow read, write: if true; and press the publish button at the top we are done with storage now.

Finally let's configure Firebase Firestore which is responsible for storing data in the format of Strings, numbers boolean arrays etc. Click the Build option again and select Firestore Database, then click Create Database leave everything as it is and click next in the cloud storage location select a region that is near to you then click Enable after successful setup you will see a page like the one below, click on the rules option edit the line allow read, write: if false; to allow read, write: if true; and press the publish button at the top We are done with Firebase Firestore now.