Flutter push notification click to open specific page Sample Code

Push notification is the most important feature in every successful apps. Engaging your users with your app content can be effectively done using push notifications.

Page / content specific push notifications plays key role to make your app great engaging experience to your users.

Let’s see the code snippet to make the flutter push notifications top open the specific pages.

I am assuming you have configured the push notifications successfully, so lets directly check the code snippets for page specific navigations from push notifications.

You can add the below snippet to your homepage initState() method

@override
  void initState() {
    // initialzing the push notification stuffs
    final GlobalKey<NavigatorState> navigatorKey =
        GlobalKey(debugLabel: "Main Navigator");

    final FirebaseMessaging firebaseMessaging = new FirebaseMessaging();

    // firebase messaging on receiving from the push notifications start - Naveen
    firebaseMessaging.configure(
      onLaunch: (Map<String, dynamic> msg) {  
        // when app is terminated or not running      
        fcmMessageHandler(msg, navigatorKey, context);
      },
      onResume: (Map<String, dynamic> msg) {        
        fcmMessageHandler(msg, navigatorKey, context);
        // when app is running in background        
      },
      onMessage: (Map<String, dynamic> msg) {        
        // when app is running on foreground
        fcmMessageHandler(msg, navigatorKey, context);
        // (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);
      },
    );    
    super.initState();
  }

And then one more separate method outside of your class to handle the received message,

you can see based on the content pushed I am doing different routings (on click of push notification it takes you to different screens ultimately 🙂

void fcmMessageHandler(msg, navigatorKey, context) {
  switch (msg['data']['screen']) {
    case "TOP10":
      Navigator.of(context).pushNamed(SwipeFeedPage.routeName);
      break;
    default:
      Navigator.of(context).pushNamed(StorePage.routeName,
          arguments: {'storeSlug': 'ajio-coupons', 'storeName': 'AGIO'});
      break;
  }
}

REST Endpoint:

https://fcm.googleapis.com/fcm/send

Authorization=> key=YOUR_FIREBASE_API_KEY (as per the below screenshot you can take your key)
Content-Type => application/json

Sample request:

Here you can see the Screen value is highlighted as TOP10 and the same only mentioned in the above code snippet switch cases in this method fcmMessageHandler.

So based on the value we are opening the SwipeFeedPage instead of the default home page.

{
    "notification": {
        "title": "Great mobile deals",
        "body": "Upto 50% offers on smart mobiles"
    },
    "data": {
        "title": "Awesome",
        "body": "Body",
        "click_action": "FLUTTER_NOTIFICATION_CLICK",
        "screen": "TOP10",
        "extradata": ""
    },
    "priority": "high",
    "restricted_package_name": "com.ngdeveloper",
"to":"jd-evIf39UGTsmvIFCEi7D78V:APA91bHihxJu_ugKCYFugtr59jczNpE6go6QjLbhCyt9c7Dgk5OHA9aPFexCBJi2nBixJqyqpCaRmt5atVOR9cBGfGUG8KO44su9gab-q9qLJuB_uZakmOa_pb3PuoON2T8yTdXSs-lk-ngdev"
}