Implementing Firebase Background Notifications in Flutter 👌
Tags: flutter, webdev, beginners, programming
Published: 2024-05-10 05:56:39

**Enabling Background Notifications in Your Flutter App with Firebase Cloud Messaging (FCM)**

This guide walks you through implementing background notifications in your Flutter application using Firebase Cloud Messaging (FCM). FCM is a powerful service that allows you to send targeted and engaging notifications to your app users, even when the app is in the background or closed.

**Prerequisites:**

- A Flutter project set up
- A Firebase project created ([https://console.firebase.google.com/](https://console.firebase.google.com/))

**Step-by-Step Guide:**

- **Firebase Project Setup and Login:**

   - In the Firebase console, create a new project or select an existing one.
   - Navigate to **Project settings** -> **Your apps**..

- **Activate FlutterFire CLI:**

   - Install the FlutterFire CLI globally using the command:
     ```bash
     dart pub global activate flutterfire_cli
     ```

- **Configure FlutterFire:**

   - In your project's root directory, run:
     ```bash
     flutterfire configure
     ```
   - Select your Firebase project and choose the app(s) you want to enable notifications for.

- **Add Required Packages:**

   - In your `pubspec.yaml` file, add the following dependencies:
     ```yaml
     dependencies:
       firebase_core: 
       firebase_messaging: 
     ```
   - Run `flutter pub get` to install the packages.

- **Create Firebase Utilities Class (firebase_utils.dart):**

   ```dart
   import 'package:firebase_messaging/firebase_messaging.dart';
   import 'package:logger/logger.dart'; // Consider using a logging library for debugging

   class FirebaseUtil {
     final _firebaseMessaging = FirebaseMessaging.instance;
     final Logger logger = Logger(); // Optional: For logging

     Future<void> handleBackgroundMessage(RemoteMessage message) async {
       logger.d(message.notification?.title ?? "No title available");
       logger.d(message.notification?.body ?? "No body available");
       logger.d(message.data);
       // Process the notification data here (e.g., display a local notification)
     }

     Future<void> initNotification() async {
       // Request notification permissions
       await _firebaseMessaging.requestPermission();

       // Get the FCM token for identification
       final fCMToken = await _firebaseMessaging.getToken();
       logger.d(fCMToken);

       // Listen for background messages
       FirebaseMessaging.onBackgroundMessage(handleBackgroundMessage);
     }
   }
   ```

- **Initialize Notifications in main.dart:**

   ```dart
   import 'package:firebase_core/firebase_core.dart';
   import 'package:flutter/material.dart';
   import 'package:flutter_notification_test/firebase_options.dart'; // Replace with your project's path
   import 'package:flutter_notification_test/firebase_utils.dart';

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

     // Initialize notification handling
     await FirebaseUtil().initNotification();

     runApp(const MyApp());
   }

   class MyApp extends StatelessWidget {
     const MyApp({super.key});

     @override
     Widget build(BuildContext context) {
       return const MaterialApp(
         home: Scaffold(
           body: Center(
             child: Text("Background Notification Test"),
           ),
         ),
       );
     }
   }
   ```

**Testing Notifications in Firebase Console:**

1. Go to the **Engage >  Messaging** section in your Firebase project.
2. Click **Send test message**.
3. Enter a title, body, and optionally, data for your notification.
4. Paste the FCM token you obtained earlier (from `FirebaseUtil.initNotification`) into the **Device token** field. This token uniquely identifies your app instance.
5. Click **Test**.


![Test Notification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3044wdmsrshj6txmpjr7.png)

**Explanation:**

- The code creates a `FirebaseUtil` class to handle notification initialization and background message processing.
- `handleBackgroundMessage` is called when a notification is received in the background. You can customize this function to display a local notification or perform other actions.
- `initNotification` requests notification permissions, retrieves the FCM