Add Firebase to your Flutter app
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.
Step 1: Install the required command line tools
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
Step 2: Configure your apps to use Firebase
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
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 yourlib/
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 theDefaultFirebaseOptions
object exported by the configuration file:WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); runApp(const MyApp());
Rebuild your Flutter application:
flutter run
If you would rather use a demo project, you can start the Firebase Emulator and
in your lib/main.dart
file initialize Firebase using demoProjectId
(it should start with demo-
):
await Firebase.initializeApp(
demoProjectId: "demo-project-id",
);
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
Product | Plugin name | iOS | Android | Web | Other Apple (macOS, etc.) |
Windows |
---|---|---|---|---|---|---|
Analytics | firebase_analytics |
beta | ||||
App Check | firebase_app_check |
beta | ||||
Authentication | firebase_auth |
beta | beta | |||
Cloud Firestore | cloud_firestore |
beta | beta | |||
Cloud Functions | cloud_functions |
beta | ||||
Cloud Messaging | firebase_messaging |
beta | ||||
Cloud Storage | firebase_storage |
beta | beta | |||
Crashlytics | firebase_crashlytics |
beta | ||||
Data Connect | firebase_data_connect |
|||||
Dynamic Links | firebase_dynamic_links |
|||||
In-App Messaging | firebase_in_app_messaging |
|||||
Firebase installations | firebase_app_installations |
beta | ||||
ML Model Downloader | firebase_ml_model_downloader |
beta | ||||
Performance Monitoring | firebase_performance |
|||||
Realtime Database | firebase_database |
beta | ||||
Remote Config | firebase_remote_config |
beta | ||||
Vertex AI in Firebase | firebase_vertexai |
beta |
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 existingmain.dart
file.From the Google Analytics example program repository, copy-paste the following two files into your app's
lib
directory:main.dart
tabs_page.dart
Run your Flutter app.
Go to your app's Firebase project in the Firebase console, then click Analytics in the left-nav.
For more information about setting up Analytics, visit the getting started guides for iOS+, Android, and web.
Notes on building web apps
Trusted Types support
The Firebase SDK for Flutter supports using Trusted Types to help prevent
DOM-based (client-side) XSS attacks. When you
enable Trusted Type enforcement
for your app, the Firebase SDK injects its scripts into the DOM using custom
Trusted Type policies, named flutterfire-firebase_core
,
flutterfire-firebase_auth
, and so on.
Disable Firebase JavaScript SDK auto-injection
By default, the Firebase Flutter SDK auto-injects the Firebase JavaScript SDK when building for the web. If you don't want the Firebase JavaScript SDK to be auto-injected, you can do the following:
Ignore the auto-injection script by adding the following property inside a
<script>
tag within theweb/index.html
file in your Flutter project:<!-- Add this property inside a <script> tag within your "web/index.html" file in your Flutter project --> <!-- Put in the names of all the plugins you wish to ignore: --> window.flutterfire_ignore_scripts = ['analytics', 'firestore'];
Load the script manually using one of the following alternatives:
Add the SDK explicitly to your
web/index.html
file, inside thewindow.addEventListener
callback:window.addEventListener('load', async function (ev) { window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/11.0.1/firebase-firestore.js"); window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/11.0.1/firebase-analytics.js"); _flutter.loader.loadEntrypoint().then(function (engineInitializer) { // rest of the code
Or, download the plugin's Firebase JavaScript SDK code from the "gstatic" domain, and save them to a JavaScript file to be kept within your project and loaded in manually:
// "web/my-analytics.js" & "web/my-firestore.js" file loaded as a script into your "web/index.html" file: window.addEventListener('load', async function (ev) { window.firebase_analytics = await import("./my-analytics.js"); window.firebase_firestore = await import("./my-firestore.js"); _flutter.loader.loadEntrypoint().then(function (engineInitializer) { // rest of the code
Next steps
Get hands-on experience with the Firebase Flutter Codelab.
Prepare to launch your app:
- Set up budget alerts for your project in the Google Cloud console.
- Monitor the Usage and billing dashboard in the Firebase console to get an overall picture of your project's usage across multiple Firebase services.
- Review the Firebase launch checklist.