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 wont 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
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.
Heres the projects 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_project
2. Add the firebase_core package to the project by running the following command:
flutter pub add firebase_core
Then execute this:
flutter pub get
Now, we will have to take different steps for iOS and Android. The process may be tedious for you but thats the way well have to go.
Note: You can ignore this section and move on to the next one if youre only working with Android
1. Open <your-project>/ios/Runner.xcworkspace with Xcode, select General tab then see your Bundle identifier. Well need this information for the following steps.
Dont close Xcode. We need to go back to it later.
2. Go back to your Firebase projects 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 weve 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.
Were done with iOS. The last three steps on the Firebase instruction page are needless for Flutter and its fine to ignore them.
Note: Well work with 2 build.gradle files. One lies in <your-project>/android and the other locates in <yourproject>/android/app.
1. Open <your-project>/android/app/build.gradle, go to the defaultConfig section and see your applicationId:
2. Go back to your Firebase projects 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 its registered with your Firebase project.
The other fields can be left emtpy.
2. Download the google-services.json file: