Flutter swipe back gesture using nested navigators

Question

I have a main navigator that push others child navigators, but if I push a route from a child navigator, on iOS when I swipe back from the open widget, it comes back to main navigator root instead to go to the root of the child widget, so how can I handle the history of the child navigator first with the swipe gesture and allow to go back on main navigator only if I'm on the root of the child (like a single navigator) ?

This is the main navigator:

class MenuNavigator extends StatelessWidget {
  final GlobalKey<NavigatorState> navigatorKey;

  const MenuNavigator({Key key, this.navigatorKey}) : super(key: key);

  WidgetBuilder routeBuilder(
      RouteSettings routeSettings, GetUserResponse userResponse) {
    switch (routeSettings.name) {
      case MenuNavigatorRoutes.root:
        return (context) => MenuPage();
      case MenuNavigatorRoutes.documents:
        return (context) => DocumentsNavigator();
      case MenuNavigatorRoutes.requests:
        return (context) => RequestsNavigator();
      default:
        return null;
    }
  }

  @override
  Widget build(BuildContext context) {
     return Navigator(
          key: navigatorKey,
          initialRoute: MenuNavigatorRoutes.root,
          onGenerateRoute: (routeSettings) {
            return MaterialPageRoute(
                settings: routeSettings,
                builder: (context) =>
                    routeBuilder(routeSettings, userResponse)(context));
          },
        );
  }
}

DocumentsNavigator and RequestsNavigator are the child navigators and have the same structure of MenuNavigator but handle others routes.

There is a (long) discussion on flutter/flutter about this: github.com/flutter/flutter/issues/14203. It seems they haven't found a solution as well. — nelsonspbr

machukas machukas · Accepted Answer · 2020-11-19T12:52:00

I just discovered that if you wrap your nested navigator with:

WillPopScope(
        child: NestedNavigator(initialRoute: ...),
        onWillPop: () async =>
            !Navigator.of(context).userGestureInProgress));

It works!

Flutter swipe back gesture using nested navigators

1 Answers