Bottom Navigation Bar Disappears When Navigating to New Page-CodePudding

I have created a BottomNavigationBar with my app, but when I navigate to a new page by clicking on Profile the BottomNavigationBar goes away. I have been working on this for hours and I am about to give up lol. Any ideas?

app.dart

@override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp(
      routes: {
        '/home':(context) => HomePage(),
        '/activity':(context) => ActivityPage(),
        '/profile':(context) => ProfilePage(),
      },
      home: Builder(
        builder: (context) => Scaffold(
          bottomNavigationBar: BottomNavigationBar(
            items: const [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home_filled), label: 'Home',),
              BottomNavigationBarItem(
                  icon: Icon(Icons.track_changes), label: 'Activity'),
              BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
            ],
            onTap: (index) {
              switch (index) {
                case 0:
                  Navigator.pushNamed(context, '/home');
                break;
                case 1:
                  Navigator.pushNamed(context, '/activity');
                break;
                case 2:
                  Navigator.pushNamed(context, '/profile');
                break;
              }
            },
          ),
          body: MaterialApp.router(
            builder: EasyLoading.init(),
            theme: ThemeData(
              appBarTheme: const AppBarTheme(color: Color(0xFF13B9FF)),
              colorScheme: ColorScheme.fromSwatch(
                accentColor: const Color(0xFF13B9FF),
              ),
            ),
            routerDelegate: AutoRouterDelegate(
              _appRouter,
              navigatorObservers: () => [AppRouteObserver()],
            ),
            routeInformationProvider: _appRouter.routeInfoProvider(),
            routeInformationParser: _appRouter.defaultRouteParser(),
            localizationsDelegates: const [
              AppLocalizations.delegate,
              GlobalMaterialLocalizations.delegate,
            ],
            supportedLocales: AppLocalizations.supportedLocales,
            debugShowCheckedModeBanner: false,
          ),
        ),
      ),
    );
  }
}

I tried clicking on different pages and still did not get the navbar to follow.

CodePudding user response：

The problem is Navigator.pushNamed because you are navigating to a new page, and on the new page, there is no BottomNavigationBar. You can use PageView and assign a PageController to it. After that, you can re-write onTap of BottomNavigationBar and control the PageView via PageController you assigned earlier.

CodePudding user response：

I had the same problem and solved it with this library. https://pub.dev/packages/persistent_bottom_nav_bar_v2/versions/4.0.3

pushNewScreenWithRouteSettings(
    context,
    settings: RouteSettings(name: MainScreen.routeName),
    screen: MainScreen(),
    withNavBar: true,
    pageTransitionAnimation: PageTransitionAnimation.cupertino,
);

withNavBar : true -> can be controlled by this