Adding Firebase to Flutter App – A Latest Integration Overview

Firebase, the most popular Backend-as-a-Service (Baas) app development tool that provides hosted backend services that include: Authentication, Real-time database, Cloud Firestore, Storage, Machine Learning tool, Remote Config, Crashlytics, and Web hosting for static files. In addition to this, Firebase supports Flutter with a new approach to its integration. Well, through the course of this blog post, we shall see the complete guide step by step. So let’s explore Adding Firebase to Flutter App – A Latest Integration Overview.

---

– Setting up a new account for Firebase

Firebase service can be linked to our existing Gmail account, but it is preferable to create a new one depending on the project type.

Note: I shall not be descriptive of this section as my audience knows the process best.

After being done with the whole process, head over to the Firebase console with your respective Gmail account.

You will be able to see this page:

Now, create a new project by jotting down a suitable name for your app.

In our case, it is a demo Student Grading App.

For the next step, either turn on or off Google Analytics for this project.

Note: Google Analytics lets you know how users are interacting with your app via charts, demographics, etc.

Next, select an account for Google Analytics.

Once done, you will land on the Firebase dashboard page where we need to do the setup for Flutter.

Let’s move on to the next one.

– Firebase Dashboard Flutter setup

You will see the following services on different platforms.

Just for learning:-

Flutter itself was not a part of the Firebase dashboard section until September 2021, so the traditional way of implementation was used i.e. separate configurations for Android & iOS.

This problem was later catered to by introducing FlutterFire CLI.

Let’s now move to the next section for CLI configuration.

– Configuring FlutterFire CLI

CLI works with npm commands and for npm, node.js is mandatory.

Install node.js from the official site, depending on your use case.

Note: This process is suitable for all operating systems.

Now, we need to set up Firebase tools, as it will help us connect the services with our App for all platforms at once.

Next, head over to your terminal or command prompt and jot down this command:

npm install -g firebase-tools

It might take some time depending on the internet connection. Once done, the Firebase configuration is just a step away.

– Implementation

Create a new Flutter project, or if you have one already, use that.

Head over to the project terminal, and enter this command:

firebase login

If you’ve done it all correctly, this command should redirect you to all of your Gmail account listings, where we will select the one we created for the Firebase project.

Allow Firebase permission and you will see this success message.

Now, install and run the FlutterFire CLI using the following command:

dart pub global activate flutterfire_cli

This command will activate this service globally and will benefit you in further setups for Firebase too.

You shall be able to receive this output:

After setup, run this command to establish a connection between the app and the Firebase project.

flutterfire configure --project=student-grading-efb57

Note: This command shall not be changed as it is provided by Firebase itself.

You can find this command by tapping on to Flutter service in the Dashboard section.

Here, you are free to decide on which Operating System you need to set up Firebase. In our case, we will only need it for Android and iOS.

Tapping would further execute the process and you will receive this successful output:

Now, to verify, check for the google_services.json file in Android as well as in iOS directories, vis-à-vis firebase_options.dart in the lib directory.

The Firebase Dashboard Preview

On refreshing the page, you will be able to see the Android and iOS projects listed.

If you’ve got it all, Congrats! We have set up Firebase correctly.

Note: You will see errors in the generated firebase_options.dart file. Don’t worry, we will cater to it in the upcoming step.

Just need to add a plugin, to sum up, and we are good to go.

We are about to install the firebase_core plugin/utility to initialize the Firebase Core API services in our App as well as enable the usage of multiple Firebase services.

Either install it manually or with a command:

Manually

Copy the latest version and paste it inside pubspec.yaml file, and hit refresh.

Via Terminal

Under the project’s terminal, jot down this command:

flutter pub add firebase_core

Note: This command installs the most suitable version of the respective package according to the Dart SDK version.

Once installed, you will surely have an errorless smooth project ready.

Let’s now attach the Firebase Core snippet to our main.dart section, and we’re good to go.

Just after main

Note: Be sure to convert the root function to future.

await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
);

Our final code snippet:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

To verify it all, just run the app once.

Be sure to run the following commands before running the app.

flutter clean
flutter pub get

However, if the app fails to run for some reason.

For a quick fix to it, under android directory, build.gradle file,

-- Replace
classpath 'com.google.gms:google-services:4.3.10'

--To
classpath 'com.google.gms:google-services:4.3.14'

It may occur due to compatibility issues between Gradle and Android Gradle Plugin.

App Preview

Here, it’s time to wind up this blog post.

Hope you thoroughly enjoyed reading this one.

Summing Up

Adding Firebase to Flutter App – A Latest Integration Overview, was all about implementing Firebase’s complete setup with a new structure introduced specifically for Flutter, i.e. FlutterFire CLI, vis-à-vis, follows the latest trend as well. In addition to this blog post, we added visuals for better understanding, short notes on highlighting errors as well and quick fixing.

However, if you feel something was missed or wrongly written, you can write it down in the comments below this blog post. I would be more than happy to help you.

Checkout GitHub Repositories

I also run a YouTube channel, where I upload Flutter tutorials, primarily followed by Github as well on a rare basis. Click Here

Link to my other blog posts

Once again! Thanks for your precious time.