Building Cross-Platform Apps with Flutter and Firebase: A FlutterFire CLI Configuration Guide

Explore the seamless integration of Flutter, the popular cross-platform framework, with Firebase, a robust backed platform. This comprehensive guide walks you through the process of setting up a Flutter project with firebase with the help of FlutterFire.

👉Full video Tutorial:https://youtu.be/oHNVhECdDvw?si=hJaOl7frHce5VvH6

Adding Firebase to a Flutter app used to involve a lot of platform-specific, manual configuration steps.So lets setup and configure Flutter with firebase using 🚀 FlutterFire CLI.

👉Follow These steps,

1.Install Firebase and FlutterFire CLI

First we need to install nodejs and setup our environment.For this please visit this ✅nodejs website and follow the simple installation process.

configure the environment variables for node as follows.

Next we need to install the Firebase CLI tool. The easiest way to do this is by running:

npm install -g firebase-tools

FlutterFire CLI is a command line tool, we need to install it as follows,

dart pub global activate flutterfire_cli

👉Here if any error is occurred please update the environment variables for the pub.

For further issues please follow this 👉 link.

2.Create a Flutter Project

Next, we can create a new Flutter app on the command line (skip this step if you want to add Firebase to an existing Flutter app.

flutter create my_test_app

By default, this app will have the default startup code inside the main() method:

3.Create a new Firebase project

First login in to the firebase console,

firebase login

If we don’t have a Firebase project yet, we have two options,

• create it directly from the Firebase console
• let flutterfire do this for us

👉As we all familiar with the first method of manual process, lets see how to do this using FlutterFire.

run,and use the CMD for this and also you must be inside your flutter project path.otherwise this will not work.

flutterfire configure

4.Adding a Firebase project with FlutterFire CLI

Assuming we have already signed in via the Firebase CLI (run firebase login if not), this will list all the available Firebase projects,

From here, we can select the project we just created and hit Enter.

Then, we can choose the platforms we want to support:

👉The CLI will automatically register a Firebase app for all the platforms we need:

🚀For any issues in this section follow this.

As proof of this, we can open the Firebase project settings and see that 3 apps have been created:

5.Initialize Flutter Application

🚀Add the firebase_core package.

Update the main.dart file as follows,

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

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

That’s it! We have completed all the configuration steps and we should now be able to run our app on Android, iOS, and web without errors.

We can repeat the steps above every time we want to add Firebase to a Flutter app, without worrying about platform-specific configuration file🙏