This article shows you how to configure Firebase SDK for a Flutter project and fix some common errors you may run into when working with this stuff in the year 2022. We will use the most recent versions of Fluter and the firebase_core package. Using older versions might lead to unexpected outcomes and incompatibilities.
If you are using Flutter with Firebase for the first time, chances are that the process wonÂ’t be as smooth and easy as you want. Be patient and calm, everything will fall into the right place by the end of this tutorial.Advertisements
Table of Contents
Prerequisites
To get the most out of this article, you need the following:
- Flutter version 2.8.1 or newer. To check it, run the “flutter doctor” command.
- A registered Firebase account.
- Basic knowledge about Flutter.
Because many people confront errors during Firebase integration so this article will try to be as detailed as possible and provides as many screenshots as possible.
Setting up a new Firebase project
1. Launch your web browser, go to https://console.firebase.google.com/, login, and click on the “+” button.
Advertisements2. Give your project a name then click on the “Continue” button:
3. To keep this tutorial short and clean, we will disable Google Analytics but you can reenable it later as you want. Click on the “Create project” button to initialize your project.
4. It will take a while to complete.
HereÂ’s the projectÂ’s dashboard:
Adding Firebase SDK
Installing the firebase_core package
This package is essential and responsible for connecting your Flutter app to Firebase.
1. Create a new Flutter project by running:
flutter create my_project2. Add the firebase_core package to the project by running the following command:
flutter pub add firebase_coreThen execute this:
flutter pub getNow, we will have to take different steps for iOS and Android. The process may be tedious for you but thatÂ’s the way weÂ’ll have to go.
iOS
Note: You can ignore this section and move on to the next one if youÂ’re only working with Android
The Steps:
1. Open <your-project>/ios/Runner.xcworkspace with Xcode, select General tab then see your Bundle identifier. WeÂ’ll need this information for the following steps.
DonÂ’t close Xcode. We need to go back to it later.
2. Go back to your Firebase projectÂ’s dashboard, click on the iOS icon to register an iOS app:
3. Now you will have to fill in some fields. The “iOS bundle ID” field is required and must be the same as the app bundle identifier that we’ve seen in Xcode in the first step of this section.
Click on the “Register app” button to continue.
4. Download the the “GoogleService-info.plist” file:
Advertisementsand drag it into the root of <your-project>/ios/Runner directory:
This step is not done and we have to do one extra thing. Go back to Xcode, right-click on ‘Runner’, select ‘Add Files to “Runner”…’ from the drop-down then pick the “GoogleService-info.plist” file.
WeÂ’re done with iOS. The last three steps on the Firebase instruction page are needless for Flutter and itÂ’s fine to ignore them.
Android
Note: We’ll work with 2 build.gradle files. One lies in <your-project>/android and the other locates in <your–project>/android/app.
The steps
1. Open <your-project>/android/app/build.gradle, go to the defaultConfig section and see your applicationId:
2. Go back to your Firebase project’s dashboard, click on the “+ Add app” button and register an Android app. Enter the applicationId you have seen in the previous step into the “Android package name” field. Note that it cannot be changed for this Firebase Android app after it’s registered with your Firebase project.
The other fields can be left emtpy.
2. Download the “google-services.json” file:
