Add Firebase to your Flutter app
plat_ios
plat_android
plat_web
Prerequisites
Install your preferred
editor or IDE
.
Install Flutter
for your specific
operating system, including the following:
- Flutter SDK
- Supporting libraries
- Platform-specific software and SDKs
Sign into Firebase
using your Google
account.
If you don't already have a Flutter app, you can complete the
Get
Started: Test Drive
to
create a new Flutter app using your preferred editor or IDE.
If you haven't already,
install the Firebase CLI
.
Log into Firebase using your Google account by running the following
command:
firebase login
Install the FlutterFire CLI by running the following command from any
directory:
dart pub global activate flutterfire_cli
Use the FlutterFire CLI to configure your Flutter apps to connect to Firebase.
From your Flutter project directory, run the following command to start the
app configuration workflow:
flutterfire configure
What does this
flutterfire configure
workflow do?
The
flutterfire configure
workflow does the following:
Asks you to select the platforms (iOS, Android, Web) supported in your
Flutter app. For each selected platform, the FlutterFire CLI creates a new
Firebase app in your Firebase project.
You can select either to use an existing Firebase project or to create a
new Firebase project. If you already have apps registered in an existing
Firebase project, the FlutterFire CLI will attempt to match them based on
your current Flutter project configuration.
Creates a Firebase configuration file (
firebase_options.dart
) and adds it
to your
lib/
directory.
(for Crashlytics or Performance Monitoring on Android)
Adds the required
product-specific Gradle plugins to your Flutter app.
Step 3
: Initialize Firebase in your app
From your Flutter project directory, run the following command to install
the core plugin:
flutter pub add firebase_core
From your Flutter project directory, run the following command to ensure
that your Flutter app's Firebase configuration is up-to-date:
flutterfire configure
In your
lib/main.dart
file, import the Firebase core plugin and the
configuration file you generated earlier:
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
Also in your
lib/main.dart
file, initialize Firebase using the
DefaultFirebaseOptions
object exported by the configuration file:
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
Rebuild your Flutter application:
flutter run
Step 4
: Add Firebase plugins
You access Firebase in your Flutter app through the various
Firebase Flutter plugins
, one for each Firebase product
(for example: Cloud Firestore, Authentication, Analytics, etc.).
Since Flutter is a multi-platform framework, each Firebase plugin is applicable
for Apple, Android, and web platforms. So, if you add any Firebase plugin to
your Flutter app, it will be used by the Apple, Android, and web versions of
your app.
Here's how to add a Firebase Flutter plugin:
From your Flutter project directory, run the following command:
flutter pub add
PLUGIN_NAME
From your Flutter project directory, run the following command:
flutterfire configure
Running this command ensures that your Flutter app's Firebase configuration
is up-to-date and, for Crashlytics and Performance Monitoring on Android, adds the
required Gradle plugins to your app.
Once complete, rebuild your Flutter project:
flutter run
You're all set! Your Flutter apps are registered and configured to use Firebase.
Available plugins
Try out an example app with Analytics
Like all packages, the
firebase_analytics
plugin comes with an
example program
.
Open a Flutter app that you've already configured to use Firebase (see
instructions on this page).
Access the
lib
directory of the app, then delete the existing
main.dart
file.
From the Google Analytics
example program repository
,
copy-paste the following two files into your app's
lib
directory:
Run your Flutter app.
Go to your app's Firebase project in the
Firebase console
, then click
Analytics
in the left-nav.
Click
Dashboard
.
If Analytics is working properly, the dashboard shows an active user
in the "Users active in the last 30 minutes" panel (this might take
time to populate this panel).
Click
DebugView
. Enable the feature to
see all the events generated by the example program.
For more information about setting up Analytics, visit the getting started
guides for
iOS+
,
Android
, and
web
.
Next steps