How do i open specific page in my flutter app when click the push notification

Question

How do I open specific page in my flutter app when click the push notification. I have created a php script to push the FCM push notification but its just opening app front page..... I want the push notification to carry a date and open the calendar page in my app and show the details of the notification.

<?php

if(isset($_GET['send_notification'])){
   send_notification ();
}

function send_notification()
{
    echo 'Hello';
    define( 'API_ACCESS_KEY', 'Secret');
 //   $registrationIds = ;
   #prep the bundle
     $msg = array
          (
        'body'  => 'App New Event Notification',
        'title' => 'There is a new event added to the calendar',

          );
    $fields = array
            (
                'to'        => $_REQUEST['token'],
                'notification'  => $msg
            );


    $headers = array
            (
                'Authorization: key=' . API_ACCESS_KEY,
                'Content-Type: application/json'
            );
#Send Reponse To FireBase Server    
        $ch = curl_init();
        curl_setopt( $ch,CURLOPT_URL, 'https://fcm.googleapis.com/fcm/send' );
        curl_setopt( $ch,CURLOPT_POST, true );
        curl_setopt( $ch,CURLOPT_HTTPHEADER, $headers );
        curl_setopt( $ch,CURLOPT_RETURNTRANSFER, true );
        curl_setopt( $ch,CURLOPT_SSL_VERIFYPEER, false );
        curl_setopt( $ch,CURLOPT_POSTFIELDS, json_encode( $fields ) );
        $result = curl_exec($ch );
        echo $result;
        curl_close( $ch );
}
?>

Solution 1

in your Home page, you can handle FCM notifications.

Also, check the firebase documentation.

first, you need to format your JSON. This is what I follow.

{  
   "notification": {
              "title": "Some title",
              "body": "Some text",
            },
            "data": {
              "title": "Some title",
              "body": "Some text",
              "click_action": "FLUTTER_NOTIFICATION_CLICK",
              "sound": "default",
              "status": "done",
              "screen": "OPEN_PAGE1",
              "extradata": "",
            }
}

firebaseMessaging.configure(
  onLaunch: (Map<String, dynamic> msg) {
    print("Called onLaunch");
    print(msg);
  },
  onResume: (Map<String, dynamic> msg) {
    //(App in background)
    // From Notification bar when user click notification we get this event.
    // on this event navigate to a particular page.
    print(msg);
    // Assuming you will create classes to handle JSON data. :)
    Notification ns =
          Notification(title: msg['title'], body: msg['body']);

      Data data = Data(
        clickAction: msg['click_action'],
        sound: msg['sound'],
        status: msg['status'],
        screen: msg['screen'],
        extradata: msg['extradata'],
      );
      switch (data.screen) {
  case "OPEN_PAGE1": 
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => Page1()
          ),
        );
    break;
  default:
    break;
  },
  onMessage: (Map<String, dynamic> msg) {
    // (App in foreground)
    // on this event add new message in notification collection and hightlight the count on bell icon.
    // Add notificaion add in local storage and show in a list.
    updataNotification(msg);
  },
);

Solution 2

This fixed it for me. Put it just after initializing FirebaseApp and FirebaseMessaging.

var _message = await FirebaseMessaging.instance.getInitialMessage();

if (_message != null) {
  // DO THE ROUTING

}

Comments

[Roxx]

Well, this is very nice. What i understood is basically we need to add these codes in main.dart and then we can redirect to other page. Correct me if i am wrong.

[Roxx]

I am still struggling with it. :( stackoverflow.com/questions/65166526/…