In today’s digital landscape, building applications that are responsive, scalable, and feature-packed is essential. One of the most effective ways to ensure that your app meets these requirements is by integrating cloud services like Firebase. Firebase offers a suite of tools and services to help you build and manage your app’s backend. In this guide, we’ll discuss how to integrate Firebase with your Flutter application, providing support for both iOS and Android, and covering steps for desktop or web applications as well.

If you prefer watching a video tutorial here is a link to that.

Installing Firebase CLI Tool

The first step in integrating Firebase with your Flutter app is to install the Firebase CLI (Command Line Interface) tool. This tool enables you to manage and configure your Firebase projects directly from your terminal.

Visit nodejs.org

To begin, navigate to nodejs.org. Node.js is a JavaScript runtime that allows you to execute JavaScript code outside of a web browser. The Firebase CLI requires Node.js to function.

Install Node.js LTS Version

On the Node.js website, download and install the Long-Term Stable (LTS) version. The LTS version is recommended for most users as it ensures stability and extended support.

Open Terminal and Verify Node Installation

After installing Node.js, open your terminal. If you’re using Windows, this will be PowerShell. In the terminal, you will verify the installation of Node.js and npm (Node Package Manager):

node --version

If Node.js is installed correctly, this command should return the version number of Node.js. Next, verify npm:

npm --version<br>

Again, this should return a version number, indicating that npm was installed along with Node.js.

Install Firebase CLI Globally

With Node.js and npm successfully installed, you can now install the Firebase CLI globally. Use the following command in your terminal:

npm install -g firebase-tools

This command installs the Firebase tools globally on your system, making them accessible from any directory.

Setting up Your Firebase Project

Now that the Firebase CLI is set up, the next step is to configure your Firebase project.

Close Terminal and Restart Visual Studio Code

To ensure that all changes take effect, close your terminal and restart your Visual Studio Code (VS Code) instance. Then, open a new terminal window within VS Code.

Open Terminal in Project Directory

Navigate to the directory containing the source code of your Flutter application. Ensure that your terminal is open within this directory. This is where you will execute the Firebase commands to configure your project.

Log in to Firebase CLI

Using the Firebase CLI, log in to your Firebase account by executing the following command:

firebase login

This command will open a web browser window, asking you to authenticate with your Firebase account. Once authenticated, the CLI will have access to your Firebase projects.

Create New Firebase Project

Head to the Firebase Console.

Visit Firebase Console

In the Firebase Console, click on “Add Project” to create a new Firebase project.

Create New Project

Give your project a meaningful name. For this tutorial, we will name it “Flutter Firebase Tutorial.” After naming your project, enable Google Analytics if you wish, then create the project.

Verifying Firebase CLI Integration

With your Firebase project created, the next step is to verify that the Firebase CLI is properly integrated.

List Firebase Projects

In your terminal, list all available Firebase projects using:

firebase projects:list

This command should return a list of all the Firebase projects associated with your account. Verify that your newly created project appears in this list.

Linking Flutter with Firebase

Now, we will link our Flutter project with Firebase, using a CLI tool called Flutterfire.

Install Flutterfire CLI

Install the Flutterfire CLI by running the following command:

pub global activate flutterfire_cli

Configure Flutter Project for Firebase

With the Flutterfire CLI installed, configure your Flutter project to use Firebase:

flutterfire configure

This command will interact with the Firebase CLI, retrieving all your Firebase projects. Using the arrow keys, select the project you created (e.g., “Flutter Firebase Tutorial”).

Select Platforms (Android, iOS)

The CLI will also ask which platforms you want to support. You can use the space bar to select or deselect platforms. For this tutorial, we will support both Android and iOS.

Confirm Firebase Configuration File Generation

After confirming your selections, the CLI will handle the configuration, including creating the necessary google-services.json and GoogleService-Info.plist files. These files are essential for Firebase integration.

Adding Firebase Dependencies

With Firebase configured, the next step is to add the necessary Firebase dependencies to your Flutter project.

Edit pubspec.yaml

Open the pubspec.yaml file in your Flutter project.

Add firebase_core Dependency

Under the dependencies section, add the firebase_core package:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest-version

To get the dependency click here.

Add Other Required Dependencies

Depending on the Firebase services you plan to use, you will need additional dependencies. For instance, to use firebase_analytics:

dependencies:
  firebase_analytics: latest-version

To get the dependency click here.

Run flutter pub get

After editing your pubspec.yaml file, run the following command to fetch the dependencies:

flutter pub get

Initializing Firebase

The next step is to initialize Firebase in your Flutter application.

Import firebase_core and firebase_options

In your main Dart file, import the necessary packages:

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

Initialize Firebase in Main Function

Modify your main function to initialize Firebase before running the app:

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

Handle Potential Errors

If you encounter an error stating that bindings have not been initialized, add the following line before calling Firebase.initializeApp:

WidgetsFlutterBinding.ensureInitialized();

This ensures that the Flutter framework is properly initialized before Firebase initialization.

Importing Additional Packages

If you require additional Firebase capabilities, such as Firebase Analytics, import those packages at the top of your Dart file:

import 'package:firebase_analytics/firebase_analytics.dart';

Testing on Android

To ensure that everything is set up correctly, run your app on an Android emulator or device. If Firebase is integrated properly, the app should run without any issues.

Testing on iOS

Similarly, test your app on an iOS simulator or device to confirm that Firebase integration works on iOS as well.

Conclusion

Integrating Firebase with your Flutter application can significantly enhance your app’s functionality and scalability. By following the steps outlined in this guide, you can seamlessly integrate Firebase into your Flutter project for both iOS and Android, and even extend support to desktop and web applications. From installing the necessary tools to configuring your project and adding dependencies, this comprehensive guide covers everything you need to get started.

Stay happy, stay healthy, keep learning, and keep growing.