Persistent Bottom Navigation Bar does not work with named routes

Question

I'm new to flutter and I'm trying to implement a persistent bottom navigation bar with the "persistent_bottom_nav_bar 4.0.2" plugin.

The issue I'm running into is, that I have to declare my AppBar in the page that implements the bottom bar, since that is where my scaffold is and the screens are just widgets loaded by the plugin into this scaffold. Now, if I'm navigating to a different page from one of the tabs, I want the AppBar to show a back button. For that I need to add an AppBar in the page I'm navigating to, but then I have two AppBars stacked. Thus, I need to hide the AppBar from the bottom bar page when I push pages into the navigator stack of the active tab.

Currently I'm trying to get the name of the route with ModalRoute.of(context)?.settings.name and compare it with the name of the route of the page that holds the bottom bar, and if they're not equal I can pass an argument back and hide the app bar. (I'm open for better solutions, that's the first I came up with). The problem is, that the named route does not work on the navigators of the different tabs. I'm getting something like this as the name: /9f580fc5-c252-45d0-af25-9429992db112.

My HomePage looks like this:

  @override
Widget build(BuildContext context) {
print(ModalRoute.of(context)?.settings.name); // this gives me the correct route name
return Scaffold(
    appBar: _showAppBar ? MyAppBar("") : null,
    body: PersistentTabView(
      context,
      controller: _controller,
      screens: _buildScreens(),
      items: _navBarsItems(),
      confineInSafeArea: true,
      popAllScreensOnTapOfSelectedTab: true,
      popActionScreens: PopActionScreensType.all,
      navBarStyle: NavBarStyle.style6,
    ));
}


List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
    PersistentBottomNavBarItem(
       routeAndNavigatorSettings: const RouteAndNavigatorSettings(onGenerateRoute: 
       router.generateRoute),
       icon: const Icon(Icons.add_circle_outline),
       title: ("Add"))
    ];
  }

List<Widget> _buildScreens() {
  return [
  const AddPage(),
];
}

On the AddPage (which is one of the tab views and only a widget without scaffold) I want a button, that navigates to a different screen. If that happens I want to hide the AppBar from the home_page and show the AppBar of this page to have the back navigation.

I do the navigation like this:

child: IconButton(
      icon: const Icon(Icons.add),
      color: Colors.white,
      onPressed: () {
        Navigator.pushNamed(context, AddCollectionRoute, arguments: 'test');
        RouteSettings? routeSettings = ModalRoute.of(context)?.settings; 
      },
    ),

But here I now have "/9f580fc5-c252-45d0-af25-9429992db112" as name and null as argument.

Routes are generated like this:

Route<dynamic> generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case AddCollectionRoute:
      return MaterialPageRoute(builder: (context) => const AddCollectionPage());
    case HomeRoute:
      return MaterialPageRoute(builder: (context) => const HomePage());
  }
}

So my questions are:

Why are the routes in the tabs anonymous and why are the arguments gone? Up until the HomePage everything works as expected.
Is there a better approach to hide the AppBar on navigation?

Persistent Bottom Navigation Bar does not work with named routes

0 Answers0