Flutter Firebase Push Notification: Ultimate Guide [2024]

Introduction:

Push notifications play a vital role in engaging users and keeping them informed about updates and important events in your Flutter app. In this tutorial, we will explore how to integrate Firebase Push Notification also known as Firebase Cloud Messaging (FCM) with Flutter to enable push notifications. By the end of this tutorial, you will have a solid understanding of how to send and receive push notifications in your Flutter app using Firebase.

Prerequisites for Flutter Firebase Push Notification:

Before starting this tutorial, make sure you have the following:

1. Flutter SDK installed: Install Flutter
2. Android Studio or Xcode for Android and iOS development, respectively
3. A Firebase project set up with FCM enabled
4. Firebase account and project: Create a Firebase project
5. Basic knowledge of Flutter and Dart programming language

Step 1: Set up Firebase

1. Create a new Firebase project or use an existing one.
2. Go to the Firebase console, select your project, and navigate to the “Project settings” page.
3. In the “Project settings” page, click on the “Add app” button to add an Android and/or iOS app to your project.
4. Follow the on-screen instructions to register your app(s) and download the google-services.json file for Android and/or the GoogleService-Info.plist file for iOS.

Step 2: Create a new Flutter project

1. Open a terminal and run the following command to create a new Flutter project:

flutter create flutter_firebase_push_notification

2. Change into the project directory:

cd flutter_firebase_push_notification

Step 3: Configure the Flutter project for Firebase

1. Copy the google-services.json file (for Android) and/or GoogleService-Info.plist file (for iOS) that you downloaded in Step 1 to the android/app (for Android) and/or ios/Runner (for iOS) directories of your Flutter project, respectively.
2. Open the android/build.gradle file and add the following classpath dependency under dependencies in the buildscript section:

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

3. Open the android/app/build.gradle file and add the following line at the bottom:

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

4. Open the pubspec.yaml file and add the firebase_messaging package dependency:

dependencies:
  flutter:
    sdk: flutter
  firebase_messaging: ^11.2.0

5. Run flutter pub get to fetch the package dependencies.

Step 4: Implement push notification handling in Flutter

1. Open the lib/main.dart file in your Flutter project.
2. Import the necessary packages:

import 'package:flutter/material.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

3. Initialize the FirebaseMessaging instance:

final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;

4. Configure the FirebaseMessaging instance in the main() function:

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

5. Add the _configureFirebaseMessaging() function to handle push notification configuration:

void _configureFirebaseMessaging() {
  _firebaseMessaging.requestPermission(
    sound: true,
    badge: true,
    alert: true,
    announcement: false,
  );

  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print('Received message: ${message.notification?.title}');
    // Handle the received message while the app is in the foreground.
  });

  FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
    print('Opened app from notification: ${message.notification?.title}');
    // Handle the received message when the app is opened from a notification.
  });
}

6. Run the app and verify that the configuration is successful.

Step 5: Send test push notification

1. Go to the Firebase console and select your project.
2. Navigate to the “Cloud Messaging” section.
3. Click on the “New Notification” button.
4. Fill in the notification details such as title, body, and target audience.
5. Click on “Send test message” and select a device to send the notification.
6. Verify that the test notification is received and handled correctly by your Flutter app.

Conclusion:

Congratulations! You have effectively utilized Flutter Firebase push notifications with Dart. This tutorial has taught you how to establish Firebase, adjust push notifications, manage incoming notifications, and send notifications using Firebase Console or a custom server. Push notifications are a potent tool for engaging users and keeping them informed. Enjoy improving the user experience of your Flutter app with this valuable feature!