Display UINotificationWindow in Terminated Mode Using Firebase Messaging & Flutter Local Notifications

Display UI Notification Window in Terminated Mode using Firebase Messaging & Flutter Local Notifications

In this article, we will discuss how to display a UI notification window in terminated mode using Firebase Messaging and Flutter Local Notifications. This is a powerful feature that allows you to engage with your users even when your app is not running in the foreground.

Key Concepts

To implement this feature, you need to understand the following key concepts:

• Firebase Cloud Messaging (FCM): FCM is a service that allows you to send messages to your app from a server. It supports both notifications and data messages.
• Flutter Local Notifications: Flutter Local Notifications is a plugin that allows you to display notifications on the device. It supports both scheduled and unscheduled notifications.
• Terminated mode: Terminated mode refers to the state of an app when it is not running in the foreground or background. In this state, the app is not consuming any resources and is not visible to the user.

Applications

Displaying a UI notification window in terminated mode is useful in the following scenarios:

• When you want to notify the user of an important event or update.
• When you want to engage the user with a time-sensitive offer or promotion.
• When you want to remind the user to complete a task or action.

Significance

Displaying a UI notification window in terminated mode is significant because it allows you to engage with your users even when your app is not running. This can help you to increase user engagement, retention, and conversion rates.

Implementation

To implement this feature, you need to follow the following steps:

1. First, you need to configure Firebase Cloud Messaging for your app. This involves creating a Firebase project, registering your app with the project, and configuring the FCM SDK.
2. Next, you need to install the Flutter Local Notifications plugin. You can do this by adding the following dependency to your pubspec.yaml file:

   dependencies:
     flutter_local_notifications: ^9.1.5
   

   Then, you need to initialize the plugin in your main() function:

   Future<void> main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp();
     const AndroidInitializationSettings androidInitializationSettings =
         AndroidInitializationSettings('@mipmap/ic_launcher');
     final InitializationSettings initializationSettings =
         InitializationSettings(android: androidInitializationSettings);
     await FlutterLocalNotificationsPlugin().initialize(initializationSettings);
   }
   

   Note that we are initializing Firebase and Flutter Local Notifications in the same function. This is because we need to use Firebase to receive the messages, and Flutter Local Notifications to display the UI notification window.

3. Next, you need to configure Firebase Cloud Messaging to send messages to your app. You can do this by creating a server-side script that sends messages to FCM using the Firebase Admin SDK. The script should send a message with both a notification and data payload. The notification payload is used to display the notification, while the data payload is used to pass data to your app.

   const message = {
     notification: {
       title: 'Title',
       body: 'Body',
     },
     data: {
       key1: 'value1',
       key2: 'value2',
     },
   };
   
   admin.messaging().send(message);
   

   Note that we are sending both a notification and data payload. The notification payload is used to display the notification, while the data payload is used to pass data to our app.

4. Next, you need to handle the incoming messages in your app. You can do this by adding a Firebase Messaging handler in your main() function:

   FirebaseMessaging.onMessage.listen((RemoteMessage message) {
     RemoteNotification notification = message.notification;
     AndroidNotification android = message.notification?.android;
     if (notification != null && android != null) {
       flutterLocalNotificationsPlugin.show(
           notification.hashCode,
           notification.title,
           notification.body,
           NotificationDetails(
             android: AndroidNotificationDetails(
               channel.id,
               channel.name,
               channel.description,
               icon: 'launch_background',
             ),
           ));
     }
   });
   

   Note that we are using the Flutter Local Notifications plugin to display the notification. We are also extracting the notification and data payloads from the message, and passing them to our app.

5. Finally, you need to display the UI notification window in terminated mode. You can do this by using the Flutter Local Notifications plugin to schedule a notification that opens a specific screen in your app when it is tapped. The screen should display the notification and data payloads.

   const AndroidNotificationDetails androidPlatformChannelSpecifics =
       AndroidNotificationDetails(
     'your channel id', 'your channel name', 'your channel description',
     importance: Importance.max, priority: Priority.high, showWhen: false);
   const NotificationDetails platformChannelSpecifics =
       NotificationDetails(android: androidPlatformChannelSpecifics);
   await flutterLocalNotificationsPlugin.show(
     0, 'title', 'body', platformChannelSpecifics,
     payload: '{"key1": "value1", "key2": "value2"}',
   );
   

   Note that we are scheduling a notification with a specific payload. When the notification is tapped, it opens a screen in our app that displays the payload.

In this article, we have discussed how to display a UI notification window in terminated mode using Firebase Messaging and Flutter Local Notifications. We have covered the key concepts, applications, and significance of this feature. We have also provided a detailed implementation guide with code blocks and subtitles.

References

• Firebase Cloud Messaging
• Flutter Local Notifications
• Firebase Admin SDK