Flutter + Firebase: The Essential Integration Guide

Firebase, Google’s suite of tools, provides a seamless way to enhance your Flutter application’s functionality. This article tells about process of integrating Firebase into your Flutter project, equipping you with core features like messaging.

Before we get started with setting up Firebase in your Flutter app, make sure you have the following in place:

• Flutter SDK installed on your development machine
• A Flutter project created and ready for Firebase integration
• A Google account to create a Firebase project

1. Firebase Project Configuration:

• Open a web browser and visit the Firebase console at https://console.firebase.google.com/.
• Sign in using your Google account.
• Within the console, locate the “Add project” button and click on it. Enter a name for your project.
• You can optionally enable Google Analytics integration for your project during creation. This provides valuable insights into app usage.
• Once you’ve filled in the details, click the “Create project” button to finalize the process.

2. Prepare your workspace

The easiest way to get you started is to use the FlutterFire CLI.

Before you continue, make sure to:

• Install the Firebase CLI and log in (run firebase login)

To install the Firebase CLI using the automatic install script, follow these steps:

Run the following cURL command:

curl -sL https://firebase.tools | bash

After installing the CLI, you must authenticate. Then you can confirm authentication by listing your Firebase projects.

Log into Firebase using your Google account by running the following command:

firebase login

3. Install and run the FlutterFire CLI

From any directory, run this command:

dart pub global activate flutterfire_cli

Then, at the root of your Flutter project directory, run this command:

flutterfire configure - project=YOUR-PROJECT-NAME

This automatically registers your per-platform apps with Firebase and adds a lib/firebase_options.dart configuration file to your Flutter project.

4. Flutter Package Installation:

• In your Flutter project’s terminal, run the following commands to install the core and messaging Firebase packages:

flutter pub add firebase_core

flutter pub add firebase_messaging

• Rebuild your Flutter project using flutter pub get or flutter packages get.

5. Initialize Firebase

To initialize Firebase, call Firebase.initializeApp from the firebase_core package with the configuration from your new firebase_options.dart file:

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

// ...

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  FirebaseMessaging messaging = FirebaseMessaging.instance;

  // Request permission to receive notifications
  NotificationSettings settings = await messaging.requestPermission(
    alert: true,
    announcement: false,
    badge: true,
    carPlay: false,
    criticalAlert: false,
    provisional: false,
    sound: true,
  );

    // Handle token updates
    FirebaseMessaging.instance.getToken().then((token) {
      print('Push notification token: $token');
    });
   
  runApp(MyApp()); // Replace MyApp() with your app's widget
}

Explanation

• Firebase.initializeApp() kicks off Firebase initialization using the configuration file.
• An instance of FirebaseMessaging is obtained for further interaction.
• requestPermission() prompts the user for notification permission.

6. Sending Test Notifications:

• Within the Firebase console, navigate to “Cloud Messaging” and create a new message.
• Craft your notification content (title, body, etc.).
• For testing purposes, target your development device using its device token.
• Send the test message.

FCM via APNs does not work on iOS Simulators. To receive messages & notifications a real device is required.

7. Receiving Test Notifications:

• Ensure your device is connected to the internet and has the Flutter app running.
• Upon receiving the test message (if permission is granted), you should observe logs printed to the console (step 3) or notification popups appearing on the device’s screen (depending on your message configuration).

That’s it! You’ve successfully integrated Firebase into your Flutter project.