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

  1. If you haven't already, install the Firebase CLI.

  2. Log into Firebase using your Google account by running the following command:

    firebase login
    
  3. 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


Step 3: Initialize Firebase in your app

  1. From your Flutter project directory, run the following command to install the core plugin:

    flutter pub add firebase_core
    
  2. From your Flutter project directory, run the following command to ensure that your Flutter app's Firebase configuration is up-to-date:

    flutterfire configure
    
  3. 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';
    
  4. Also in your lib/main.dart file, initialize Firebase using the DefaultFirebaseOptions object exported by the configuration file:

    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );
    runApp(const MyApp());
    
  5. 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:

  1. From your Flutter project directory, run the following command:

    flutter pub add PLUGIN_NAME
  2. 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.

  3. 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.

  1. Open a Flutter app that you've already configured to use Firebase (see instructions on this page).

  2. Access the lib directory of the app, then delete the existing main.dart file.

  3. From the Google Analytics example program repository, copy-paste the following two files into your app's lib directory:

    • main.dart
    • tabs_page.dart
  4. Run your Flutter app.

  5. Go to your app's Firebase project in the Firebase console, then click Analytics in the left-nav.

    1. 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).

    2. 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.

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:

  1. Ignore the auto-injection script by adding the following property inside a <script> tag within the web/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'];
    
  2. Load the script manually using one of the following alternatives:

    • Add the SDK explicitly to your web/index.html file, inside the window.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