March 28, 2021 by Learnitfree

How to add Firebase to Flutter app in 8 easy steps

Flutter

In today’s tech world we are so dependent on apps and technology that it has become an integral part of our lives. Almost every app service needs to store the data somewhere and as it is not convenient to store this data on the user’s device, we need to store it on the server-side.

Google’s Firebase is an open-source platform that can help you build, improve and grow your app. You don’t need to manage servers. You don’t need to write APIs. Firebase is your server, your API, and your datastore, all written so generically that you can modify it to suit most needs.

Here are the steps to connect your flutter project to the firebase both for Android as well as for IOS….

How to add firebase to your flutter project for Android?

Let’s see how to add firebase to the Android app.

1. Go to firebase.google.com. 

If you have a Firebase account, sign in to it. If you don’t have one, you’ll need to create a Firebase account. 
Click the ‘Get started’ button (here I’ve already signed in).

2. In the Firebase console, click Add project.

As shown in the screencap below, enter a name for your Firebase project and click “Continue”.

After clicking the continue button, configure Google Analytics.
Select a default account option.

Now you need to connect your firebase project to your flutter project.

3. Click on the Android logo from your project home page.

4. Registering the app.

Now go to your flutter project, copy the package name from the app-level build.gradle file and paste it on the register page of your firebase and then click on the register app button.

5. Download the config file.

On the next page download the config file and paste it into the app folder of your Android studio.

In flutter, we have two types of build.gradle file i.e. project level gradle file and app-level gradle file. In both these gradle files we need to add the following dependencies.

6. Adding dependencies

Add the following line of code in the dependencies of the project level gradle file of your flutter project.

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

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

7. Applying plugins

Add the following lines of code in the apply plugin and the dependencies of the app level gradle file of your flutter project respectively.

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


apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

8. That’s it!

After a minute or so, your Firebase project will be ready. Click Continue.

Now just click on the ‘Next button’ on the firebase and run your flutter application.

The Firebase console will show the following message if you have successfully connected your flutter app with the firebase.

How to add firebase to your flutter project for iOS?

Now let’s see how to add firebase to Flutter ios app

1. Go to firebase.google.com. 

If you have a Firebase account, sign in to it. If you don’t have one, you’ll need to create a Firebase account. 
Click the ‘Get started’ button

 2. In the firebase console, click Add project.

After clicking the continue button, configure Google Analytics.
Select a default account option.

Now you need to connect your firebase project to your flutter project.

3. Click on the iOS logo from your project home page.

Click on the ios logo on the page to proceed with adding firebase to the flutter app.

4. Registering the app

Now go to your flutter project, copy the Bundle Id from the app-level build.gradle file and paste it on the register page of your firebase and then click on the register app button.

5. Downloading the info.plist file

After that download the info.plist file and paste it in the runner folder of your project using Xcode.

Remember: Don’t directly paste this info.plist file directly in from Android Studio.

6. After clicking Next you’ll see the following page.

Now go to the Android Studio Terminal, type cd ios (which will take you to the ios folder), and then type pod init.

$ pod init

Now go to your pod file in the ios folder and add the following code at the end of the pod file.

# add pods for desired Firebase products
# https://firebase.google.com/docs/ios/setup#available-pods

Now type pod install command in your terminal.

$ pod install

7. Updating the AppDeligate.swift file

Open the AppDeligate.swift in the Runner folder of your project and update the AppDeligate.swift file as shown below.

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
@import UIKit;
@import Firebase;
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[FIRApp configure];
return YES;
}@end

8. That’s it!

After a minute or so, your Firebase project will be ready. Click Continue.

Now just click on the ‘Next button’ on the firebase and run your flutter application.

And congrats you have added firebase to your flutter app.

Go to Learnitfree to learn from free courses and tutorials

---