Black Friday Sale

Flutter Foundations Course

Buy now and get 33% off the regular price!

View Course

How to add Firebase to a Flutter app with FlutterFire CLI

Adding Firebase to a Flutter app used to involve a lot of platform-specific, manual configuration steps.

But with the release of Flutter 2.8, we can now initialize Firebase directly from Dart:

import 'package:firebase_core/firebase_core.dart'; import 'firebase_options.dart'; // generated via `flutterfire` CLI Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); runApp(MyApp()); }

This is made possible by the new FlutterFire CLI tool, which can generate the correct Firebase configuration for our project.

And since the documentation for FlutterFire CLI is quite bare-bones, I have written this guide to cover all the setup steps.

And as a bonus, we'll see how to configure a Flutter app with multiple flavors and Firebase environments.

Ready? Let's go!

1. Installing the Firebase and FlutterFire CLI

Since FlutterFire CLI is a command line tool, we need to install it first:

dart pub global activate flutterfire_cli

We'll also need to install the Firebase CLI tool. The easiest way to do this is by running:

npm install -g firebase-tools

The Firebase CLI provides a variety of tools to test, manage, and deploy your Firebase projects from the command line. For more info, see the official documentation and GitHub page.

2. Creating a new Flutter app

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:

import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); }

3. Creating a new Firebase project

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

In my experience, it's best to go with option 1 as flutterfire sometimes throws errors like this when creating the project:

FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command.

So let's add a new project from the Firebase console:

Creating a new Firebase project
Creating a new Firebase project

Step 1 is to choose a project name:

Creating a new Firebase project (step 1)
Creating a new Firebase project (step 1)

On step 2 we can disable Google Analytics as we don't need it:

Creating a new Firebase project (step 2)
Creating a new Firebase project (step 2)

4. Adding the Firebase project with the FlutterFire CLI

Once we have created the Firebase project, we can get back to the command line and run:

flutterfire configure

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

i Found 18 Firebase projects. ? Select a Firebase project to configure your Flutter application with ... code-with-andrea-flutter (code-with-andrea-flutter) flutterfire-flavors-dev (flutterfire-flavors-dev) flutterfire-test-549e9 (flutterfire-test) ... my-test-app-a4ff9 <create a new project>

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

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

? Which platforms should your configuration support (use arrow keys & space to select)? android ios macos web

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

i Firebase android app com.example.my_test_app is not registered on Firebase project my-test-app-a4ff9. i Registered a new Firebase android app on Firebase project my-test-app-a4ff9. i Firebase ios app com.example.myTestApp is not registered on Firebase project my-test-app-a4ff9. i Registered a new Firebase ios app on Firebase project my-test-app-a4ff9. i Firebase macos app com.example.myTestApp is already registered. i Firebase web app my_test_app (web) is not registered on Firebase project my-test-app-a4ff9. i Registered a new Firebase web app on Firebase project my-test-app-a4ff9. Firebase configuration file lib/firebase_options.dart generated successfully with the following Firebase apps: Platform Firebase App Id web 1:940076056012:web:45e6683f0fce24f30bf169 android 1:940076056012:android:9df898bb4eb8c8a50bf169 ios 1:940076056012:ios:0747c8a0cbed9aaf0bf169 macos 1:940076056012:ios:0747c8a0cbed9aaf0bf169 Learn more about using this file in the FlutterFire documentation: > https://firebase.flutter.dev/docs/cli

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

Firebase apps created in the projects settings
Firebase apps created in the projects settings

5. Initializing Firebase in the Flutter app

After completing the step above, we'll find a new file called firebase_options.dart inside lib.

At a minimum, we'll need to add firebase_core to our pubspec.yaml:

dependencies: flutter: sdk: flutter firebase_core: ^1.10.6

Then, we can open main.dart and add the initialization code.

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 files (I'm looking at you, GoogleService-info.plist and google-services.json!). 🙏

And we can focus on adding features instead. 🚀

And if you want to learn how to setup Flutter & Firebase apps with multiple flavors, see this follow-up article:

Happy coding!

References

Want More?

Invest in yourself with my high-quality Flutter courses.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

Learn Dart Programming in depth. Includes: basic to advanced topics, exercises, and projects. Fully updated to Dart 2.15.

The Complete Flutter Course Bundle

The Complete Flutter Course Bundle

Learn about State Management, App Architecture, Navigation, Testing, and much more by building a full-stack Flutter eCommerce app on iOS, Android, and web.

Flutter Animations Masterclass - Full Course

Flutter Animations Masterclass - Full Course

Master Flutter animations and build a completely custom habit tracking application.