Flutter App and Firebase

Connecting your flutter App to Firebase.

Add Firebase to Flutter App

Step 1: Navigate to the Firebase console. You will see a dashboard,

Add a new project, click create a new project button.

add the name of your project and accept terms and condition

add name of your project and accept terms and condition

Add Google Analytics for your Firebase project. You can add by enabling the toggle button.

Configure Google Analytics. Then click on create a new project and continue to start.

A new dashboard will be created for you

Add Android To Flutter App

For this project we will add android to our project( 2nd icon). Click on the android icon to get started.

Step 1.Register our App

To register our app, we need an android package name. This package name is located in you project’s android folder. android/app/build.gradle search for applicationId which is contained inside default config.

defaultConfig {
  applicationId "com.example.timetable"
  minSdkVersion 16
  targetSdkVersion 30
  versionCode flutterVersionCode.toInteger()
  versionName flutterVersionName
}

Add application Id to the project.Skip the optional parts, if it is not required in your project. Click the Register App button.

Step 2:

Add google-services.json file to our project. Download the json file to your machine. Add the file inside the android/app folder outside the src folder. The click next.

step 3: Add Firebase SDK

Modify the project level build.gradle in-order to be able to use the google-services.json file we downloaded. Check if all requirements are added.

modify App level build by adding the configurations below. Ensure all the plugins provided on Firebase console are added to your project. After adding the configurations click next and continue to console.

N.B: Enable Multidex for our application.

When your app and the libraries it references exceed 65,536 methods, you encounter a build error that indicates your app has reached the limit of the Android build architecture. To bypass this error add enable multidex in our application. Add this line to default config in the file above.

// Enabling multidex support.
multiDexEnabled true

HEEEEEEEYYYYYYY!!!!!!!!. Our App ready.

Test Firebase on our APP

Let’s create a registration page and add a user to Firebase. We will need to authenticate a user with email and password. To achieve this we will need to select a sign-in method. In this case, email/password. Navigate to authentication/sign-in method, click on email/password and enable.

Back to our Project

Read on the basics of Firebase AUTH

Add Firebase packages to pubspec.yaml file.

cloud_firestore: ^2.4.0
firebase_core: ^1.4.0
firebase_auth: ^3.0.1

Create a registration page. The code is only for demonstration purposes, you can refactor the code to make it more readable

Initialize firebase in our main.dart class

Run your APP

From the above we can see the user has been added to Firebase successfully.

N.B Password must be more than 6 characters.

In-case you get error in the screenshot below. Check if you added multidex to your grade file. Also follow up on the documentation to get latest version of plugins and changes introduced.

Follow this link for a walk through Login and registration using Firebase.

HAPPY CODING!!!!!!!!!!!!!!!!!!!!!!!!!!!!