Step By Step Guide to Firebase With Flutter

• General
• Github

In this article, We will go through Step By Step Guide to Firebase With Flutter with a detailed article on it.

Step-by-Step Guide to How to Integrate Firebase in Flutter Mobile Application?

Depending on the type of platform users are requested to follow the below steps. There are a few prerequisites as listed below:

• Install your preferred editor or IDE.
• Make sure that your app meets the following requirements.

1. Targets API level 16 (Jelly Bean) or later
2. Uses Gradle 4.1 or later

• Set up a device or emulator for running your app. Emulators must use an emulator image with Google Play.
• Install Flutter for your specific operating system, including the following:
• 1. Flutter SDK
• 2. Supporting libraries
• 3. 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.

Now follow the below steps to get started with Firebase into Flutter App.

Step 1: Create a Firebase project

Before you can add Firebase to your Flutter app, you need to create a Firebase project to connect to your app. Visit Understand Firebase Projects to learn more about Firebase projects.

• Create a Firebase project follow the steps below:

1. In the Firebase console, click Add Project, then select or enter a Project name. If you have an existing Google Cloud Platform (GCP) project, you can select the project from the dropdown menu to add Firebase resources to that project.
2. (Optional) If you are creating a new project, you can edit the Project ID. Firebase automatically assigns a unique ID to your Firebase project. Visit Understand Firebase Projects to learn about how Firebase uses the project ID.
   
3. Click Continue.
4. (Optional) Set up Google Analytics for your project, which enables you to have an optimal experience using any of the following Firebase products:

• Firebase Crashlytics
• Firebase Cloud Messaging
• Firebase Remote Config
• Firebase Predictions
• Firebase In-App Messaging
• Firebase A/B Testing
• When prompted, select to use an existing Google Analytics account or to create a new account. If you choose to create a new account, select your Analytics reporting location, then accept the data-sharing settings and Google Analytics terms for your project.
  

5. Click Create project (or Add Firebase, if you’re using an existing GCP project).

Firebase automatically provisions resources for your Firebase project. When the process completes, you’ll be taken to the overview page for your Firebase project in the Firebase console.

Step 2: Register your app with Firebase

1. In the center of the Firebase console’s project overview page, click the Android icon (plat_android) to launch the setup workflow. If you’ve already added an app to your Firebase project, click Add app to display the platform options.

2. Enter your app’s package name in the Android package name field.

• A package name is sometimes referred to as an application ID.
• Find this package name in your module (app-level) Gradle file, usually app/build.gradle (example package name: com.yourcompany.yourproject).

3. (Optional) Enter other app information as prompted by the setup workflow.

• App nickname: An internal, convenience identifier that is only visible to you in the Firebase console
• Debug signing certificate SHA-1: A SHA-1 hash is required by Firebase Authentication (when using Google Sign In or phone number sign-in) and Firebase Dynamic Links.

4. Click the Register app.

Step 3: Add a Firebase configuration file

1. Click Download google-services.json to obtain your Firebase Android config file (google-services.json).

• You can download your Firebase Android config file again at any time.
• Make sure the config file is not appended with additional characters, like (2).

2. Move your config file into the android/app directory of your Flutter app.

3. To enable Firebase services in your Android app, add the google-services plugin to your Gradle files, as follows:

• In your root-level (project-level) Gradle file (android/build.gradle), add rules to include the Google Services Gradle plugin. Check that you have Google’s Maven repository, as well.

buildscript {

repositories {
// Check that you have the following line (if not, add it):
google() // Google's Maven repository
}

// ...

dependencies {
// ...

// Add the following line:
classpath 'com.google.gms:google-services:4.3.3' // Google Services plugin
}
}

allprojects {
// ...

repositories {
// Check that you have following line (if not, add it):
google() // Google's Maven repository
// ...
}
}

• In your module (app-level) Gradle file (usually android/app/build.gradle), apply the Google Services Gradle plugin.

// Add the following line:
apply plugin: 'com.google.gms.google-services' // Google Services plugin

android {
// ...
}

// ...

4. Run flutter packages get.
For more information about managing packages and plugins, refer to Using Packages.

5. Back in the Firebase console-setup workflow, click Next to skip the remaining steps.

6. Continue to Add FlutterFire plugins.

Step 4: Add FlutterFire plugins

Flutter uses plugins to provide access to a wide range of platform-specific services, such as Firebase APIs. 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 for example Realtime Database, Authentication, Analytics, or Storage. Flutter provides a set of Firebase plugins, which are collectively called FlutterFire.

Since Flutter is a multi-platform SDK, each FlutterFire plugin is applicable for both iOS and Android. So, if you add any FlutterFire plugin to your Flutter app, it will be used by both the iOS and Android versions of your Firebase app.

Be sure to check the FlutterFire docs for the most up-to-date list of FlutterFire plugins.

1. Ensure that your app is not currently running in your emulator or on your device.

2. From the root directory of your Flutter app, open your pubspec.yaml file.

3. Add the FlutterFire plugin for the Firebase Core Flutter SDK.

dependencies:
flutter:
sdk: flutter
# Add the dependency for the Firebase Core Flutter SDK
firebase_core: ^0.4.0+9

Add the FlutterFire plugins for the Firebase products that you want to use in your app.

Analytics enabled

dependencies:
flutter:
sdk: flutter
# Check that you have this dependency (added in the previous step)
firebase_core: ^0.4.0+9

# Add the dependency for the FlutterFire plugin for Google Analytics
firebase_analytics: ^5.0.2

# Add the dependencies for any other Firebase products you want to use in your app
# For example, to use Firebase Authentication and Cloud Firestore
firebase_auth: ^0.14.0+5
cloud_firestore: ^0.12.9+5

Analytics not enabled

dependencies:
  flutter:
    sdk: flutter
  # Check that you have this dependency (added in the previous step)
  firebase_core: ^0.4.0+9

  # Add the dependencies for the Firebase products you want to use in your app
  # For example, to use Firebase Authentication and Cloud Firestore
  firebase_auth: ^0.14.0+5
  cloud_firestore: ^0.12.9+5

5. Run flutter packages get.
For more information about managing packages and plugins, refer to Using Packages.

If you added Analytics, run your app to send verification to Firebase that you’ve successfully integrated Firebase. Otherwise, you can skip the verification step.

You’re all set! Your Flutter app is registered and configured to use Firebase.

Once you create a project on Firebase Console you will google-services.json it on the android/app folder also don’t forget to define the latest version of firebase_database into pubspec.yaml.

Conclusion:

In this article, we have been through Step By Step Guide to integrate Firebase With Flutter.

That’s it for today!!!

Need more assistance with Flutter Development?

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.