Getting started with Firebase and Flutter

This document is for you if you have a Flutter app and want to add Firebase to it, or if you are already using Firebase and want to learn how to build a native mobile app using Flutter.

Prerequisites

Flutter

You need the following software installed for Flutter:

• The Flutter SDK and supporting libraries.
• An editor (you can use your preferred editor).

If you do not have an existing Flutter app, follow the Get Started: Test Drive to create a new Flutter app. The instructions differ depending on your editor. If you’re using an IDE, a new app is usually called a project.

Firebase

You should be signed up for a Firebase account. A free plan is sufficient for development.

Create a Firebase project

You need to create a Firebase project so you can connect your Flutter app to it:

1. Go to the Firebase console and click Add project.
2. Name your project (for example, "My Firebase Flutter App") and set the Country/region to the location of your company or organization. Click Create Project.
3. After a minute your project will be ready. Click Continue.

Platform-specific Firebase configuration

Once you have created a Firebase project, you can configure one (or more) apps to use that project. To do this, register your app's platform-specific ID with Firebase and generate configuration files for your app.

If your Flutter app will be released on both iOS and Android, register both the iOS and Android versions within the same Firebase project. If not, just skip the unneeded section.

In the top-level directory of your Flutter app, the ios and android directories hold platform-specific configuration files for iOS and Android.

Configure iOS

1. In the Firebase console, be sure Project Overview is selected in the left nav. Click Add Firebase to your iOS app. A dialog will appear. First, you'll fill in the mandatory iOS bundle ID, as described by the following two steps. (More information about bundle IDs.)
2. In a terminal window go to the top-level directory of your Flutter app and run the command open ios/Runner.xcworkspace to open Xcode. (More information on Xcode property lists.)
3. In Xcode, click the top-level Runner label in the left pane to display the General tab in the right pane, as shown in the figure below. Copy the Bundle Identifier. The actual values of "yourcompany" and "yourproject" depend on what you specified when creating your Flutter app. Paste the Bundle Identifier into the iOS bundle ID field in the Firebase console and click Register App.
4. In the next page, follow the instructions to download the file GoogleService-Info.plist.
5. In Xcode, notice that Runner has a subfolder also called Runner, as shown in the figure above. Drag the GoogleService-Info.plist file (from where you downloaded it) into that Runner subfolder.
6. Back in the Firebase console, click Next and skip the remaining steps to go back to the main page of the Firebase console.

Configure Android

1. In the Firebase console, be sure Project Overview is selected in the left nav. Click Add Firebase to your Android app. If you already added an app (for example, the iOS app from the preceding section), click Add another App to get to this. A dialog will appear.
2. In your Flutter app directory, open the file android/app/src/main/AndroidManifest.xml. The string value of the manifest element's package attribute is the Android package name (something like com.yourcompany.yourproject). Copy this value. In Firebase, paste the copied package name into the Android package name field. (More information about package and application IDs.)
3. Optional: If you plan to use Google Sign In or Firebase Dynamic Links, you will need to fill in the Debug signing certificate SHA-1 field. Follow the instructions in the Authenticating Your Client guide to get the debug certificate fingerprint value and paste it in.
4. Click Register App.
5. In the next page, follow the instructions to download the file google-services.json. Move the google-services.json file into the android/app directory of your Flutter app.
6. In Firebase, you can skip the remaining steps to go back to the main Firebase console.
7. Finally, you need the Google Services Gradle plugin to read the google-services.json file that was generated by Firebase. In your IDE or editor, open android/app/build.gradle, and add the following line as the last line in the file:

   apply plugin: 'com.google.gms.google-services'

   In android/build.gradle, inside the buildscript tag, add a new dependency:

   buildscript {
       repositories {
           // ,,,
       }
       dependencies {
           // ...
           classpath 'com.google.gms:google-services:3.2.1'   // new
       }
   }

   The "new" comment is just to indicate the line that was added. Make sure the new dependency lines up exactly with the other classpath. This line specifies version 3.2.1 of the plugin (do not use version 3.3.0 or 3.3.1 at this point). For more information see the Add the SDK section of the Add Firebase to Your Android Project documentation (but don't follow those instructions as they are different from the Flutter instructions).

Your Flutter app should now be connected to Firebase.

Add FlutterFire plugins

Flutter provides access to a wide range of platform-specific services, including Firebase APIs, using plugins. Plugins include platform-specific code to access services and APIs on each platform.

Firebase is accessed through a number of different libraries, one for each Firebase product (e.g., databases, authentication, analytics, storage). Flutter provides a plugin to access each Firebase product, and this set of plugins is collectively called FlutterFire. Be sure to check the FlutterFire docs for the most up-to-date list of FlutterFire plugins.

Adding analytics (optional)

The rest of this document is optional; it tells you how to modify your app to add Google Analytics for Firebase. Adding analytics is a relatively easy way to verify that Firebase is working properly with Flutter. In addition, analytics is a good thing to add to a Flutter app because it can be very useful during development and debugging, as well as helping track the success of your published apps.

1. Add the firebase_analytics plugin to the pubspec.yaml file.

   dependencies:
     flutter:
       sdk: flutter
     firebase_analytics: ^0.3.3     # new
   

2. Run flutter packages get. For more information on managing packages and plugins, see Using Packages.

Analytics app example

Like all packages, the firebase_analytics plugin comes with an example program.

1. From the firebase_analytics example program repository, copy the files main.dart and tabs_page.dart into the lib directory of your Flutter app, replacing the existing main.dart file.
2. Run the Flutter app.
3. Open the Firebase console for your project. Under Analytics click on Dashboard. The dashboard should show an active user in the "Users active in the last 30 minutes" panel (this might take a while). This verifies that analytics is working. You can also see all the events generated by the example program by enabling DebugView. For more information on setting up analytics, see the getting started guides for iOS and Android.

More about Firebase and Flutter

• List of FlutterFire plugins.
• Get hands-on experience with the Firebase Flutter Codelab.
• How to enable DebugView and debug events from analytics.