Android back button is not calling onWillPop after popping another page in Flutter

Question

I have a BottomNavigationBar with an IndexedStack and I'm trying to implement nested navigation inside each navigation tab. For example, "search" tab has its own Navigator wrapped in a WillPopScope like following:

WillPopScope(
  onWillPop: () async {
    BottomNavigationBar navigationBar = navigationKey.currentWidget;
    if (Navigator.canPop(navigatorContext)) {
      Navigator.pop(navigatorContext);
    } else if (searchBarController.isOpen) {
      searchBarController.close();
    } else {
      BottomNavigationBar navigationBar = navigationKey.currentWidget;
      navigationBar.onTap(0);
    }
    return false;
  },
  child: Navigator(
    onGenerateRoute: (settings) {
      return MaterialPageRoute(
        settings: settings,
        builder: (context) {
          switch (settings.name) {
            case '/':
              return buildRootPage();
            case '/movie':
              return MoviePage();
            default:
              return null;
          }
        },
      );
    },
  ),
);

After pushing a page to this search tab and popping it, back button no longer calls onWillPop method and nothing happens. However, back button starts to work again whenever I click anywhere on the screen.

What can possibly cause this?

Answer 1

make sure that WillPopScope Widget is the top widget not the child of MaterialApp or Scaffold