Thiran Technologies
May 1, 2018 · 5 min read

Consider a scenario where your Mobile Application needs a Firebase push notification with action button, wherein this action button should enable a direct reply option rather than going into the App.
This article explains a quick way to achieve Direct Reply Push Notification which address the above scenario.

Design:

The current project design has a direct reply push notification. Currently, the Flutter plugin(FirebaseMessaging) available to use the Firebase Cloud Messaging service for push notifications doesn’t provide an option to add action buttons to the notification layouts. So in order to add the action button to notifications, the only way we have now is to create the notification in native and integrate it with Flutter.

Implementation:

This implementation for Android is structured into three parts namely “Integrating Flutter with Android”, “Implementing Firebase tool in Android Studio” and “Sending downstream messages with Firebase console” and these are explained below sequentially.

Step 1 :

Open “Android” of your project in Android Studio. After opening, one can see Main Activity class under java folder of your App. This Main Activity extends all the methods and classes in your flutter thus enabling a flexibility to run your project in Android Studio.

Declare the following in MainActivity Class:

Step 2 :

Go to tools and select Firebase. A Firebase window will be opened.Select Cloud messaging in that.

Step 3:

connect your App to Firebase by clicking on “Connect to Firebase” button in Firebase window.
A dialog box will appear to provide project name for creating a new project in Firebase console or to select from the existing one.

Step 4:

Add FCM (Firebase Cloud Messaging) to your App by clicking on “Add FCM to you App”, a dialog box will appear where you need to accept Gradle changes.

Step 5:

Access the device registration token:
On initial startup of your app, the FCM SDK generates a registration token for the client app instance.
If you want to target single device or create device groups, you’ll need to access this token.
You can access the token’s value by creating a new class which extends FirebaseInstanceIdService .
In that class, call getToken within onTokenRefresh , and log the value as shown:

Also add the service to your manifest file:

The onTokenRefresh callback fires whenever a new token is generated, so calling getToken in its context ensures that you are accessing a current, available registration token.
FirebaseInstanceID.getToken() returns null if the token has not yet been generated.

Step 6:

Handling Messages:

If you wish to do any message handling beyond receiving notifications on apps in the background, create a new Service ( File > New > Service > Service ) that extends FirebaseMessagingService . This service is necessary to receive notifications in foregrounded apps, to receive data payload, to send upstream messages, and so on. In this service create an onMessageReceived method with NotificationCompat.Builder method to handle incoming messages. NotificationCompat.Builder is a builder class for NotificationCompat objects which allows easier control over all flags, as well as helps to construct typical notification layouts.
Declare the following in your application’s manifest:

Step 7:

Applying Reply button:

1) Create an instance of RemoteInput.Builder that you can add to your notification action.
This class’s constructor accepts a string that the system uses as the key for the text input. Later, your handheld app uses that key to retrieve the text of the input.

public static final String NOTIFICATION_REPLY = "NotificationReply";

2) Create a PendingIntent for the reply action.

3) Attach the RemoteInput object to an action using addRemoteInput().

4) Apply the action to a notification and issue the notification.

Declare the following dependencies in your App Build Gradle:

Step 8:

Retrieve user input from the reply

To receive user input from the notification reply UI, call RemoteInput.getResultsFromIntent(), passing it the Intent received by your BroadcastReceiver:

Declare a manifest

After you’ve processed the text, update the notification by calling NotificationManagerCompat.notify() with the same ID and tag (if used). This is necessary to hide direct reply UI and confirm to the user that their reply was received and processed correctly.

When working with this new notification, use the context that’s passed to the receiver’s onReceive() method.
Append the reply to the bottom of the notification by calling setRemoteInputHistory().
However, if messaging app is built, it is required to create a messaging-style notification and append the new message to the conversation.

Step 9:

Build your Gradle and run your project .

Step 10:

Got to your Firebase console and open your project which you have specified in Step 3. Select Cloud Messaging below Grow. Type the message for push notification and select the App. On clicking Send button the notification will be sent to required App.

After sending the message from Firebase Console, the following push notification is seen in your mobile.

You can get the full source code of this app at the following Github repo.

https://github.com/ThiranTech/Flutter_Firebase_push_Notification

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade