Flutter FCM Navigation onResume/onLaunch

Question

In my app, I got a class "home" where the user is navigated to after he is authorized. Within "home" there is a PageView with BottomNavigationBar. When the user is getting a push notification from firebase (new message) he should be navigated to ChatHome and to the specific chat after tapping. How can I do this?

Home does look like this

@override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      body: PageView(
        children: <Widget>[
          Feed(userID: widget.userID),
          SearchView(),
          ChatHome(),
          Profile(
              uid: currentUser?.uid,
              auth: widget.auth,
              logoutCallback: widget.logoutCallback,
          ),
        ],
        controller: pageController,
        onPageChanged: onPageChanged,
        physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: CupertinoTabBar(
          currentIndex: pageIndex,
          inactiveColor: Colors.white,
          backgroundColor: Color.fromRGBO(0, 111, 123, 1),
          activeColor: Color.fromRGBO(251, 174, 23, 1),
          onTap: onTap,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home, size: 20),
              title: Text("Home"),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search, size: 20),
              title: Text("Search"),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.chat, size: 20),
              title: Text("Chats"),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.profile, size: 20),
              title: Text("Profile"),
            ),
          ]),
    );
  }

In ChatHome I got ListTiles with all the chat partners. On click the user is navigated to the specific chat.

Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => Chat(
                    chatPartnerId: chatPartner[index].uid,
                    chatPartnerName: chatPartner[index].username,
                    chatPartnerPhotoUrl: chatPartner[index].photoUrl)));

In home page, I got my onResume

I tried different things but could find a good solution

With the following code, I was able to navigate to ChatHome but the BottomNavigationBar disappeared.

onResume: (Map<String, dynamic> message) async {
          final screen = message['screen'];
          print(screen);
          if(screen == "ChatHome"){
          Navigator.pushNamed(context, '/chatHome');
        } 
      },

The following code didn't work well as the app jumped around and always ends in home.

onResume: (Map<String, dynamic> message) async {
          final screen = message['screen'];
          print(screen);
          if(screen == "ChatHome"){
          Navigator.pushNamed(context, '/home').then((_) => pageController.jumpToPage(2));
        } 
      },

routes: {
          '/rootPage': (BuildContext context) => new RootPage(auth: new Auth()),
          '/chatHome': (BuildContext context) => ChatHome(),
          '/home': (BuildContext context) => Home(),
        },

Any help is appreciated.

Answer 1

You need to provide a navigatorKey to your MaterialApp Widget:

final GlobalKey<NavigatorState> navigatorKey = new GlobalKey<NavigatorState>();

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            ....
            navigatorKey: navigatorKey,
            .....
        );
    }
}

Then, you can use this navigatorKey to navigate in your onResume handler:

onResume: (message) async {
    navigatorKey.currentState.pushNamed("/sample-route/" + message["data"]["..."])
}

For the onLaunch handler (which is called directly onLaunch, means the first app view isn't built yet which means you cannot use the navigatorKey instantly, I only found a hacky solution:

onLaunch: (message) async {
    Timer.periodic(
        Duration(milliseconds: 500),
        (timer) {
            if (navigatorKey.currentState == null) return;
            navigatorKey.currentState.pushNamed("/sample-route/" + message["data"]["..."]);
            timer.cancel();
        },
    );
}

Of course, the solution for onLaunch isn't clean, but it works.