How to redirect to a page in flutter from push notification

Question

I am implementing push notification in my flutter app and need some help on how to redirect..

Basically,this is normal flow

app-> root->home->list->detail. There is a default back navigation

When a user get a push notification and click on it then they go directly to the detail page. This is correct but I want to see a back button where they can go to the home screen.

app->detail

What I want is after user view the detail then they should go back to the home screen . However, there no back button in this scenario

this is my root page

class RootPage extends StatefulWidget {

  RootPage({Key key}) : super(key: key);
  _RootPage createState() => _RootPage();
}
class _RootPage extends State<RootPage> with WidgetsBindingObserver {
  AppLifecycleState _appLifecycleState;
  var _message;
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    setState(() {
      _appLifecycleState = state;
    });
  }
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) {
        setState(() {
          _message = message;
        });
      },
      //app in background
      onResume: (Map<String, dynamic> message) {
        setState(() {
          _message = message;
        });
      },
    );
    _firebaseMessaging.requestNotificationPermissions(
        const IosNotificationSettings(sound: true, badge: true, alert: true));
  }
  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {

    if (_message != null) {
      if (_appLifecycleState != null && _appLifecycleState.index == 0) {
        // app is in resume state
        if (_message["type"] == "Notification") {
          String _Id = _message["Id"];
          String _reference = _message["reference"];
          return (DetailPage(Id: _Id, reference: _reference));
        }
      }
    } //end if
    return MyHomePage();
  }
}

---

HOME PAGE

class MyHomePage extends StatefulWidget {

  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    super.initState();

  }
  final List<Widget> _children = [
    List(),
    Search(),
    MyCalendarPage(),
  ];
  var _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar(
            title: Center(child: Text("my app")),
            actions: <Widget>[
              new IconButton(
                icon: new Icon(Icons.favorite),
                onPressed: () {},
              ),

            ],
          ),
          drawer: Drawer(),
          body: _children[_currentIndex],
          bottomNavigationBar: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              onTap: onTabTapped, // new
              currentIndex: _currentIndex, // new
              items: [
                new BottomNavigationBarItem(
                  icon: new Icon(Icons.home),
                  title: new Text("home"),
                ),
                new BottomNavigationBarItem(
                  icon: new Icon(Icons.search),
                  title: new Text("search"),
                ),
                new BottomNavigationBarItem(
                  icon: new Icon(Icons.schedule),
                  title: new Text("schedule"),
                )
              ]
              )
              );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

How can I go to the home screen then redirect to the detail page if there push notification? I believe then I would see a back button since the previous page would have been the home screen..

Not sure how to re-work my code to make this happen

Thanks for the help

Answer 1

If you want a back button for navigation you should use routes (see https://flutter.dev/docs/development/ui/navigation) In addition i reccomend the plugin Fluro for Navigation (https://github.com/theyakka/fluro). This will make passing aruments to your routes easier.

To make navigating from the push message easier use a navigatorKey in your MaterialApp

So your MaterialApp Widget would look something like this (without fluro):

class MyApp extends StatefulWidget {
  @override
  State createState() => _MyApp();
}

class _MyApp extends State<MyApp> {
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>(debugLabel:"navigator");
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      home: MyHomePage(),
    );
  }

  @override
  void initState() {
    _firebaseMessaging.configure(
      //app in background
      onResume: (Map<String, dynamic> message) {
        if (message["type"] == "Notification") {
          final String id = message["Id"];
          final  String reference = message["reference"];
          navigatorKey.currentState.push(MaterialPageRoute(builder: (context) => DetailPage(Id: id, reference: reference)));
        }
      },
    );
  }
}