How to Open Particular Screen on Clicking on Push Notification for Flutter

In this article, we will discuss how to open a particular screen when clicking on a push notification in a Flutter app.

Prerequisites

To implement this feature, you need to have the following prerequisites:

• Firebase Cloud Messaging (FCM) set up for your Flutter app.
• A working understanding of Firebase and FCM concepts.

Step 1: Set Click Action in Payload Data

To receive the message in the onMessage handler, you need to set click_action to “FLUTTER_NOTIFICATION_CLICK” in the data section of a payload. The format for this should be as follows:

DATA='{
  "notification": {
    "body": "this is a body",
    "title": "this is a title",
  },
  "data": {
    "click_action": "FLUTTER_NOTIFICATION_CLICK",
    "sound": "default", 
    "status": "done",
    "screen": "screenA",
  },
  "to": ""
}'

Step 2: Receive Message in onMessage Handler and Navigate to Desired Screen

In the onMessage handler, you can call Navigator.of(context).pushNamed(message[‘screen’]) to navigate to the desired screen. However, if you don’t have a BuildContext at that point, you can register a GlobalKey as the navigatorKey property of your MaterialApp, and use it to access your Navigator globally via GlobalKey.currentState.

Here’s an example code snippet:

Future _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  print("onBackgroundMessage: $message");
}
    
class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State{
  
  @override
  void initState() {
    super.initState();
  
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  FirebaseMessaging.onMessage.listen((RemoteMessage message) async {
        print("onMessage: $message");
    
          if (message.data["navigation"] == "/your_route") {
            int _yourId = int.tryParse(message.data["id"]) ?? 0;
            Navigator.push(
                    navigatorKey.currentState.context,
                    MaterialPageRoute(
                        builder: (context) => YourScreen(
                              yourId:_yourId,
                            )));
        });
    }
  }

Step 3: Migrate to Latest Firebase Messaging Version

If you’re using an older version of Firebase Messaging before Null Safety, here are the steps to migrate:

• In your pubspec.yaml file, update the following dependencies:

firebase_core: ^0.7.0
firebase_messaging: ^8.0.0-dev.15

• Update the main.dart file as follows:

Future main() async {
      
        WidgetsFlutterBinding.ensureInitialized();
        await Firebase.initializeApp();
        await FirebaseMessaging.instance.setForegroundNotificationPresentationOptions(
          alert: true,
          badge: true,
          sound: true,
        );
        runApp(new MyApp());
}

class MyApp extends StatefulWidget {

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
...

• In your homeScreen.dart file, update the FirebaseMessaging setup as follows:

Future _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
      print("onBackgroundMessage: $message");
}
    
    class HomeScreen extends StatefulWidget {
      @override
      _HomeScreenState createState() => _HomeScreenState();
    }
    
    class _HomeScreenState extends State{
    
      @override
      void initState() {
        super.initState();
    
    FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
    FirebaseMessaging.onMessage.listen((RemoteMessage message) async {
        print("onMessage: $message");
    });

Conclusion

In this article, we have discussed how to open a particular screen when clicking on a push notification in a Flutter app. We covered the prerequisites for implementing this feature and provided step-by-step instructions for setting up Firebase Cloud Messaging, navigating to desired screens, and migrating to the latest version of Firebase Messaging.