Flutter: Configure Firebase for iOS and Android (2021)

Last updated on June 24, 2021 A Goodman Loading... 6 comments

This article shows you how to configure Firebase SDK for a Flutter project and fixing some common errors you may run into when working with this stuff in the year of 2021. 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.

Prerequisites

To get the most out of this article, you need the following:

  • Flutter version 2.2 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.

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

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 firebase_core package to the dependencies section in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.3.0

3. Run the following command:

flutter pub get

Now, 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:

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

We don’t need these steps for Flutter

Android

Note: We’ll work with 2 build.gradle files. One lies in <your-project>/android and the other locates in <yourproject>/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:

Move the “google-services.json” file into your <your-project>/android/app directory:

3. Open <your-project>/android/build.gradle and add the following line to the dependencies section:

classpath 'com.google.gms:google-services:4.3.5'

See my screenshot if you’re confusing:

4. Open <your-project>/android/app/build.gradle and add the following line right below the apply plugin: ‘com.android.application’ line:

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

See mine for more clarity:

Now we’re with the Android guy.

Test our work

If an bug blocks your way, don’t be panic. The next section provides you some solutions to beat it.

1. Before using any Firebase service, we have to call the initializeApp method:

import 'package:firebase_core/firebase_core.dart'; // import firebase_core

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

The full code:

// main.dart
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Center(),
    );
  }
}

2. Run the project one by one with the iOS simulator and then the Android emulator. If no error occurs, we are successful. If there are errors, please see the next section.

flutter run

Common Errors and How to Fix Them

CocoaPods could not find compatible versions for pod “firebase_core” (iOS)

This problem occurs on iOS.

The error message:

Specs satisfying the `firebase_core (from `.symlinks/plugins/firebase_core/ios`)` dependency were found, but they required a higher minimum
    deployment target.

More output from CocoaPods:

 [!] Automatically assigning platform `iOS` with version `9.0` on target `Runner` because no platform was specified. Please specify a platform for
    this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.

Solution

Go to <your-project>/ios/Podfile, uncomment the “# platform :ios, ‘9.0’” line, then replace ‘9.0’ with ‘10.0’ or a higher version. I will go with ‘11.0’.

# Uncomment this line to define a global platform for your project
platform :ios, '11.0'

Now run your project again. It should work fine.

uses-sdk:minSdkVersion 16 cannot be smaller than version 19 (Android)

This problem occurs on Android.

Some of the error messages:

build/tflite/intermediates/library_manifest/debug/AndroidManifest.xml as the library might be using APIs not available in 16
        Suggestion: use a compatible library with a minSdk of at most 16,
                or increase this project's minSdk version to at least 19,
                or use tools:overrideLibrary="sq.flutter.tflite" to force usage (may lead to runtime failures)
                                                                        
FAILURE: Build failed with an exception.                                
                                                                        
* What went wrong:                                                      
Execution failed for task ':app:processDebugMainManifest'.              
> Manifest merger failed with multiple errors, see logs    

Solution

The solution is proposed quite clear in the error messages. Our job is to increase the project’s minSdk to 19 or higher. Go to <your-project>/android/app/build.gradle, find the defaultConfig block, and change minSdkVersion to 19 or a higher number. I will go with 20.

For more clarity, you can take a glance at this screenshot:

What’s Next?

Congratulation! You’ve successfully added Firebase SDK to your Flutter project. Don’t be upset if you encounter bugs and spend more time than you has expected. It is a very normal thing that everyone encounters in developing applications.

More article(s) about Firebase stuff:

If you would like to explore other new and interesting stuff about Flutter, take a look at the following articles:

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.

Subscribe
Notify of
guest
6 Comments
Inline Feedbacks
View all comments
Janez
Janez
5 months ago

When I try your code a get error:

E/flutter ( 5584): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)]

Janez
Janez
5 months ago
Reply to  A Goodman

After all errors I used “lib/main.dart” from FlutterFire and it start working. After that I try your code again and it works?
I don’t understand. Thanks anyway!

Rohith
Rohith
6 months ago

Can u make a tutorial on firebase messaging for v9.0.0

Related Articles