I want to disable or hide the bottom navigation bar on few screens of the app using Multiple Navigators with BottomNavigationBar suggested by Andrea Bizzott in his Medium article

How can I achieve it?

Like if I go inside AllCtgView (It is the class that I'm opening inside TabNavigator upon clicking a button inside the bottom navigation bar), I want the navigation bar to hide whenever any screen inside the AllCtgView class showed up.

MyApp Class

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BaseHomeView(),
    );
  }
}

BaseHomeView class

/////////////////////////////////////////////////////////////////////////////
/// DIY NAVIGATOR SOLUTION
////////////////////////////////////////////////////////////////////////////

class BaseHomeView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => BaseHomeViewState();
}

class BaseHomeViewState extends State<BaseHomeView> {
  String _currentPage = "Page1";
  List<String> pageKeys = ["Page1", "Page2", "Page3", "Page4", "Page5"];
  Map<String, GlobalKey<NavigatorState>> _navigatorKeys = {
    "Page1": GlobalKey<NavigatorState>(),
    "Page2": GlobalKey<NavigatorState>(),
    "Page3": GlobalKey<NavigatorState>(),
    "Page4": GlobalKey<NavigatorState>(),
    "Page5": GlobalKey<NavigatorState>(),
  };
  int _selectedIndex = 0;

  void _selectTab(String tabItem, int index) {
    if (tabItem == _currentPage) {
      _navigatorKeys[tabItem].currentState.popUntil((route) => route.isFirst);
    } else {
      setState(() {
        _currentPage = pageKeys[index];
        _selectedIndex = index;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    final _deviceSize = MediaQuery.of(context).size;
    return WillPopScope(
      onWillPop: () async {
        final isFirstRouteInCurrentTab =
            !await _navigatorKeys[_currentPage].currentState.maybePop();
        if (isFirstRouteInCurrentTab) {
          if (_currentPage != "Page1") {
            _selectTab("Page1", 1);

            return false;
          }
        }
        // let system handle back button if we're on the first route
        return isFirstRouteInCurrentTab;
      },
      child: Scaffold(
        body: Stack(children: <Widget>[
          _buildOffstageNavigator("Page1"),
          _buildOffstageNavigator("Page2"),
          _buildOffstageNavigator("Page3"),
          _buildOffstageNavigator("Page4"),
          _buildOffstageNavigator("Page5"),
        ]),
        bottomNavigationBar: CurvedNavigationBar(
          color: Colors.white,
          backgroundColor: colorBlueLightShade,
          buttonBackgroundColor: Colors.white,
          onTap: (int index) {
            _selectTab(pageKeys[index], index);
          },
          index: _selectedIndex,
          items: <Widget>[
            Icon(FontAwesomeIcons.bars, size: _deviceSize.height * 0.02),
            Icon(FontAwesomeIcons.bars, size: _deviceSize.height * 0.02),
            Icon(FontAwesomeIcons.heart, size: _deviceSize.height * 0.02),
            Icon(FontAwesomeIcons.shoppingCart,
                size: _deviceSize.height * 0.02),
            Icon(FontAwesomeIcons.bars, size: _deviceSize.height * 0.02),
          ],
          // type: BottomNavigationBarType.fixed,
        ),
      ),
    );
  }

  Widget _buildOffstageNavigator(String tabItem) {
    return Offstage(
      offstage: _currentPage != tabItem,
      child: TabNavigator(
        navigatorKey: _navigatorKeys[tabItem],
        tabItem: tabItem,
      ),
    );
  }
}

TabNavigator class

class TabNavigatorRoutes {
  static const String root = '/';
  static const String detail = '/detail';
}
class TabNavigator extends StatelessWidget {
  TabNavigator({this.navigatorKey, this.tabItem});
  final GlobalKey<NavigatorState> navigatorKey;
  final String tabItem;

  @override
  Widget build(BuildContext context) {
    Widget child;
    if (tabItem == "Page1")
      child = HomeView();
    else if (tabItem == "Page2")
      child = AllCtgView();
    else if (tabItem == "Page3")
      child = FavouriteProductsView();
    else if (tabItem == "Page4")
      child = CartView();
    else if (tabItem == "Page5") child = HomeView();

    return Navigator(
      key: navigatorKey,
      onGenerateRoute: (routeSettings) {
        return MaterialPageRoute(builder: (context) => child);
      },
    );
  }
}

Below is the project, you can simply duplicate and run it https://github.com/Kickbykick/Persistent-Bottom-Navigation-Bar