how to add buttons to firebase messaging notification?

Question

I am newbie to flutter, I am using firebase-Messaging to send notification to device we use web API that send request to firebase to send notification and firebase send notification to the android. I want under the notification title and body show two buttons (accept and reject) like watts app notification "mark as read" option I want some thing like that.

Android manifest file I added:

<intent-filter>
            <action android:name="FLUTTER_NOTIFICATION_CLICK" />
            <category android:name="android.intent.category.DEFAULT" />
        </intent-filter>

flutter Code

 final FirebaseMessaging _firebaseMessaging = FirebaseMessaging(); 
if(user != null)
{
  Navigator.push(context,
            MaterialPageRoute(builder: (context) => InitialPage()));

          _firebaseMessaging.onTokenRefresh.listen(sendTokenToServer);
          _firebaseMessaging.getToken();
       //   _firebaseMessaging.subscribeToTopic('all');

          _firebaseMessaging.configure(
            onMessage: (Map<String, dynamic> message) async {
              print("onMessage: $message");
              final notification = message['data'];

            },
            onLaunch: (Map<String, dynamic> message) async {
              print("onLaunch: $message");
            },
            onResume: (Map<String, dynamic> message) async {
              print("onResume: $message");
            },
          );
          _firebaseMessaging.requestNotificationPermissions(
              const IosNotificationSettings(sound: true, badge: true, alert: true));


      } 

web api service code

 public class NotificationController : ApiController
{
    //api/user
    public IHttpActionResult GetUsers()
    {
       
            WebRequest tRequest = WebRequest.Create("https://fcm.googleapis.com/fcm/send");
            tRequest.Method = "post";
            //serverKey - Key from Firebase cloud messaging server  
            tRequest.Headers.Add(string.Format("Authorization: key={0}", "xxxxxxxxxxxxxxxxxxxxxx"));
            //Sender Id - From firebase project setting  
            tRequest.Headers.Add(string.Format("Sender: id={0}", "123456"));
            tRequest.ContentType = "application/json";
        var payload = new
        {
            
            to = "wwwwwwwwwwww",
            priority = "high",
            content_available = true,
            notification = new
            {
                body = "test body",
                title = "Test title",
                badge = 1,
               
                },
                data = new
                {
                    key1 = "value1",
                    key2 = "value2"
                }

            };

            string postbody = JsonConvert.SerializeObject(payload).ToString();
            Byte[] byteArray = Encoding.UTF8.GetBytes(postbody);
            tRequest.ContentLength = byteArray.Length;
            using (Stream dataStream = tRequest.GetRequestStream())
            {
                dataStream.Write(byteArray, 0, byteArray.Length);
                using (WebResponse tResponse = tRequest.GetResponse())
                {
                    using (Stream dataStreamResponse = tResponse.GetResponseStream())
                    {
                        if (dataStreamResponse != null) using (StreamReader tReader = new StreamReader(dataStreamResponse))
                            {
                                String sResponseFromServer = tReader.ReadToEnd();
                                //result.Response = sResponseFromServer;
                            }
                    }
                }
            }

            return Ok("test service");
       
       
       
    }

}

Solution

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.

Check this medium post

Comments

[Noor Allan]

thank you for your answer :) I have another question please … when my app in foreground and send notification to it its not show as notification I mean no notification receive to the device . how I can handle it

[Mr Random]

You can use flutter_local_notifications packages to show notifications when the app receives them directly pub.dev/packages/flutter_local_notifications

[Shani Kehati]

Is this answer relevant to Firebase in Capcitor too?