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:
- create it directly from the Firebase console
- let
flutterfire
do this for us
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:
Step 1 is to choose a project name:
On step 2 we can disable Google Analytics as we don't need it:
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:
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!