Flutter Push Notification with Firebase Cloud Messaging

Flutter Push Notification with Firebase Cloud Messaging

In this tutorial, we will learn how to implement Firebase Push Notification with Flutter apps. Flutter Push Notification Tutorial with Example

In this tutorial, we will learn how to implement Firebase Push Notification with Flutter apps

What you'll learn?

  • Configure android project such as gradle and manifest file
  • Creating Firebase Project & do configuration
  • Writing code for push notification
  • Receive push notification
  • Send Push Notification via firebase console & curl

Firebase Cloud Messaging for Flutter

A Flutter plugin to use the Firebase Cloud Messaging (FCM) API.

With this plugin, your Flutter app can receive and process push notifications as well as data messages on Android and iOS. Read Firebase's About FCM Messages to learn more about the differences between notification messages and data messages.

1. Depend on it Add this to your package's pubspec.yaml file:

dependencies:
  firebase_messaging: ^5.1.8

2. Install it You can install packages from the command line:

with Flutter:

flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it Now in your Dart code, you can use:

import 'package:firebase_messaging/firebase_messaging.dart';

Getting Started

Check out the example directory for a sample app using Firebase Cloud Messaging.

Android Integration #

To integrate your plugin into the Android part of your app, follow these steps:

Using the Firebase Console add an Android app to your project: Follow the assistant, download the generated google-services.json file and place it inside android/app.

Add the classpath to the [project]/android/build.gradle file.

dependencies {
  // Example existing classpath
  classpath 'com.android.tools.build:gradle:3.2.1'
  // Add the google services classpath
  classpath 'com.google.gms:google-services:4.3.0'
}

Add the apply plugin to the [project]/android/app/build.gradle file.

// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'

Note: If this section is not completed you will get an error like this:

java.lang.IllegalStateException:
Default FirebaseApp is not initialized in this process [package name].
Make sure to call FirebaseApp.initializeApp(Context) first.

Note: When you are debugging on Android, use a device or AVD with Google Play services. Otherwise you will not be able to authenticate.

  1. (optional, but recommended) If want to be notified in your app (via onResume and onLaunch, see below) when the user clicks on a notification in the system tray include the following intent-filter within the <activity> tag of your android/app/src/main/AndroidManifest.xml:
  intent-filter>
      action android:name="FLUTTER_NOTIFICATION_CLICK" />
      category android:name="android.intent.category.DEFAULT" />
  intent-filter>

Optionally handle background messages #

Background message handling is intended to be performed quickly. Do not perform long running tasks as they may not be allowed to finish by the Android system. See Background Execution Limits for more.

By default background messaging is not enabled. To handle messages in the background:

1. Add an Application.java class to your app

 package io.flutter.plugins.firebasemessagingexample;

 import io.flutter.app.FlutterApplication;
 import io.flutter.plugin.common.PluginRegistry;
 import io.flutter.plugin.common.PluginRegistry.PluginRegistrantCallback;
 import io.flutter.plugins.GeneratedPluginRegistrant;
 import io.flutter.plugins.firebasemessaging.FlutterFirebaseMessagingService;

 public class Application extends FlutterApplication implements PluginRegistrantCallback {
   @Override
   public void onCreate() {
     super.onCreate();
     FlutterFirebaseMessagingService.setPluginRegistrant(this);
   }

   @Override
   public void registerWith(PluginRegistry registry) {
     GeneratedPluginRegistrant.registerWith(registry);
   }
 }

2. Set name property of application in AndroidManifest.xml

  <application android:name=".Application" ...>

3. Define a top level Dart method to handle background messages

 Future<dynamic> myBackgroundMessageHandler(Map<String, dynamic> message) {
   if (message.containsKey('data')) {
     // Handle data message
     final dynamic data = message['data'];
   }

   if (message.containsKey('notification')) {
     // Handle notification message
     final dynamic notification = message['notification'];
   }

   // Or do other work.
 }

Note: the protocol of data and notification are in line with the fields defined by a RemoteMessage.

  1. Set onBackgroundMessage handler when calling configure
    _firebaseMessaging.configure(
        onMessage: (Map<String, dynamic> message) async {
          print("onMessage: $message");
          _showItemDialog(message);
        },
        onBackgroundMessage: myBackgroundMessageHandler,
        onLaunch: (Map<String, dynamic> message) async {
          print("onLaunch: $message");
          _navigateToItemDetail(message);
        },
        onResume: (Map<String, dynamic> message) async {
          print("onResume: $message");
          _navigateToItemDetail(message);
        },
      );
    Note: configure should be called early in the lifecycle of your application so that it can be ready to receive messages as early as possible. See the example app for a demonstration.

iOS Integration #

To integrate your plugin into the iOS part of your app, follow these steps:

1.Generate the certificates required by Apple for receiving push notifications following this guide in the Firebase docs. You can skip the section titled "Create the Provisioning Profile".

  1. Using the Firebase Console add an iOS app to your project: Follow the assistant, download the generated GoogleService-Info.plist file, open ios/Runner.xcworkspace with Xcode, and within Xcode place the file inside ios/Runner. Don't follow the steps named "Add Firebase SDK" and "Add initialization code" in the Firebase assistant.
  2. In Xcode, select Runner in the Project Navigator. In the Capabilities Tab turn on Push Notifications and Background Modes, and enable Background fetch and Remote notifications under Background Modes.
  3. Follow the steps in the "Upload your APNs certificate" section of the Firebase docs.

Dart/Flutter Integration #

From your Dart code, you need to import the plugin and instantiate it:

import 'package:firebase_messaging/firebase_messaging.dart';

final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

Next, you should probably request permissions for receiving Push Notifications. For this, call _firebaseMessaging.requestNotificationPermissions(). This will bring up a permissions dialog for the user to confirm on iOS. It's a no-op on Android. Last, but not least, register onMessage, onResume, and onLaunch callbacks via _firebaseMessaging.configure() to listen for incoming messages (see table below for more information).

Receiving Messages #

Messages are sent to your Flutter app via the onMessage, onLaunch, and onResume callbacks that you configured with the plugin during setup. Here is how different message types are delivered on the supported platforms: App in ForegroundApp in BackgroundApp TerminatedNotification on AndroidonMessageNotification is delivered to system tray. When the user clicks on it to open app onResume fires if click_action: FLUTTER_NOTIFICATION_CLICK is set (see below).Notification is delivered to system tray. When the user clicks on it to open app onLaunch fires if click_action: FLUTTER_NOTIFICATION_CLICK is set (see below).Notification on iOSonMessageNotification is delivered to system tray. When the user clicks on it to open app onResume fires.Notification is delivered to system tray. When the user clicks on it to open app onLaunch fires.Data Message on AndroidonMessage``````onMessage while app stays in the background.not supported by plugin, message is lost**Data Message on iOSonMessageMessage is stored by FCM and delivered to app via onMessage when the app is brought back to foreground.Message is stored by FCM and delivered to app via onMessage when the app is brought back to foreground.

Additional reading: Firebase's About FCM Messages.

Notification messages with additional data #

It is possible to include additional data in notification messages by adding them to the "data"-field of the message.

On Android, the message contains an additional field data containing the data. On iOS, the data is directly appended to the message and the additional data-field is omitted.

To receive the data on both platforms:

Futurevoid> _handleNotification (Mapdynamic, dynamic> message, bool dialog) async {
    var data = message['data'] ?? message;
    String expectedAttribute = data['expectedAttribute'];
    /// [...]
}

Sending Messages #

Refer to the Firebase documentation about FCM for all the details about sending messages to your app. When sending a notification message to an Android device, you need to make sure to set the click_action property of the message to FLUTTER_NOTIFICATION_CLICK. Otherwise the plugin will be unable to deliver the notification to your app when the users clicks on it in the system tray.

For testing purposes, the simplest way to send a notification is via the Firebase Console. Make sure to include click_action: FLUTTER_NOTIFICATION_CLICK as a "Custom data" key-value-pair (under "Advanced options") when targeting an Android device. The Firebase Console does not support sending data messages.

Alternatively, a notification or data message can be sent from a terminal:

DATA='{"notification": {"body": "this is a body","title": "this is a title"}, "priority": "high", "data": {"click_action": "FLUTTER_NOTIFICATION_CLICK", "id": "1", "status": "done"}, "to": "<FCM TOKEN>"}'
curl https://fcm.googleapis.com/fcm/send -H "Content-Type:application/json" -X POST -d "$DATA" -H "Authorization: key=<FCM SERVER KEY>"

Remove the notification property in DATA to send a data message.

flutter firebase

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Firebase Flutter Tutorial - Firebase CloudStorage in Flutter

In this Firebase Flutter Tutorial, we wrap the Firebase Storage package into a service to easily manage and upload the firebase storage.

Mastering payments in Flutter - Flutter & Firebase E-commerce APP (Firebase CRUD)

Mastering payments in Flutter - Flutter & Firebase E-commerce APP (Firebase CRUD)

Flutter - How to Add AdMob Real Ads in Flutter App | Flutter AdMob Tutorial

Hello Whats is up Everyone So, Today I am going to show u How to Add Admob Real ads in Flutter apps which are very Easy Implement After watching this video u...

Themes in Flutter: Part 3

Find out the more about most important class of flutter ‘ThemeData’

Capture Screenshot in Flutter and Upload to Firebase | Flutter Tutorial for Beginners

In this Flutter Tutorial, we will be taking a look at ways to capture screenshot in flutter. We will be taking a look at widgets involved to convert a selected widget to Image and then upload that to Firebase Cloud Storage.