Open certain page on push notification using firebase cloud messaging on flutter

Question

I've manage to push a notification to my flutter app using firebase cloud messaging. what I'm trying to do right now is that, once i click the notification, it will directly to a certain page that the app have. How do i redirect the notification to a certain page? thank you

Answer 1

I have something like this, in my FCM class:

static StreamController<Map<String, dynamic>> _onMessageStreamController =
      StreamController.broadcast();
static StreamController<Map<String, dynamic>> _streamController =
      StreamController.broadcast();
static final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();
static final Stream<Map<String, dynamic>> onFcmMessage =
      _streamController.stream;

static setupFCMListeners() {
    print("Registered FCM Listeners");
    _firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        _onMessageStreamController.add(message);
      },
      onLaunch: (Map<String, dynamic> message) async {
        _streamController.add(message);
      },
      onResume: (Map<String, dynamic> message) async {
        _streamController.add(message);
      },
    );
  }

  static Widget handlePath(Map<String, dynamic> dataMap) {
    var path = dataMap["route"];
    var id = dataMap["id"];
    return handlePathByRoute(path, id);
  }

  static Widget handlePathByRoute(String route, String routeId) {
    switch (route) {
      case "user":
        return Profile(guid: routeId);
      case "event":
        return EventInfo(eventId: routeId);
      case "messaging":
        return MessagingView(guid: routeId);
      default:
        return null;
    }
  }

My main.dart subscribes to onFcmMessage stream, but you don't need streams to do all this. Also, you need some code to handle stream failure and closure.

But when the app comes to foreground it gets the message on either onMessage callback or the onLaunch or onResume callback. Check their differences on the FCM flutter pub docs.

The methods handlePath and handlePathByRoute are methods that usually my main.dart or other classes listening to notifications call to get the path to route to, but you can simply call them directly by replacing the stream code here like:

static setupFCMListeners() {
    print("Registered FCM Listeners");
    _firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        print("Message: $message"); // Not handling path since on notification in app it can be weird to open a new page randomly.
      },
      onLaunch: (Map<String, dynamic> message) async {
        handlePath(message);
      },
      onResume: (Map<String, dynamic> message) async {
        handlePath(message);
      },
    );
  }

This honestly may not even be the best or even a good approach but due to lack of documentation, this is what I'm working with for now. I'd love to try Günter Zöchbauer's approach and save some object creation if possible!

Hope this is helpful! :)

EDIT: Profile, EventInfo and MessagingView are three classes that extend StatefulWidget, sorry if that wasn't clear.

You can also try using named routes, they make it easier like api routes and avoid a lot of imports and have a central router, but AFAIK they lacked transition configurations.