Handling of back navigation in nested routes, ignored PopScope about auto_route_library HOT 2 OPEN

So, I come up with a theory.

Looks like PopScope implements PopEntry. registerPopEntry should always register to the top route, which happens inside didChangeDependencies() method. For me, this method is not called when pushing other children's routes. This mean that other children routes pushed atop, are not registered, and PopScopes canPopNotifier is not used.

from auto_route_library.

So I think I finally solved the issue for my case. I will try to describe the solution as best I can.

Let's take for example one nested page from my example above, e.g. IdentityVerificationStepTaxId. This page has two "states" which means two content widgets. First _SelectIdTypeDataStateWidget and second _FillNationalIdDataStateWidget. This means, that once the user selects ID type, the second widget is presented to him.

My solution was to wrap the whole content inside _FillNationalIdDataStateWidget (the second one) with PopScope the following way:

return PopScope(
  canPop: false,
  onPopInvoked: (didPop) => stateNotifier.clearSelectTaxIdType(),
  child: Container(

This will handle the back button on that page, and always block the maybePop. It will also invoke the clearSelectTaxIdType, which will switch UI back to _SelectIdTypeDataStateWidget (the first one). The second widget gets disposed, including the PopScope handler, and on the second maybePop, the navigator will switch to the previous nested screen.

This solves half of my issue, with blocking of the navigation on a specific page. The second issue is to get notified every time the navigation changes, and I actually change the child navigation, which I am currently handling using NavigationObserver.

This means that on the root IdentityVerificationPage, I have a custom nav observer, and I am handling the pop there manually. Here is a code snippet:

class _NavigationObserver extends AutoRouterObserver {
  _NavigationObserver({
    required this.onDidPop,
  });

  final void Function() onDidPop;

  @override
  void didPop(Route route, Route? previousRoute) {
    onDidPop();
    super.didPop(route, previousRoute);
  }
}

AutoRouter(
  navigatorObservers: () => [
    _NavigationObserver(
      onDidPop: () => stateNotifier.onPopInvoked(),
    ),
  ],
)

from auto_route_library.