Need help creating a persistent bottom navigation bar in inner pages using auto_route: ^7.4.0 in Flutter

Question

Hello Stack Overflow community,

I'm currently working on a project and I'm facing an issue regarding the implementation of a persistent bottom navigation bar using auto_route: ^7.4.0 in my Flutter application. I've searched extensively for a solution but haven't found anything that addresses my specific requirement.

Here's what I'm trying to achieve: I want to create a bottom navigation bar that remains persistent across multiple pages or screens in my app. I have already implemented the navigation using auto_route: ^7.4.0, which is working well for navigating between screens. However, I'm struggling to figure out how to keep the bottom navigation bar visible and interactive when switching between pages.

Here are some relevant details about my setup:

Flutter version: 3.10 auto_route version: ^7.4.0 I would greatly appreciate it if someone could guide me in the right direction or provide a code example demonstrating how to achieve a persistent bottom navigation bar using auto_route: ^7.4.0. Any insights, suggestions, or alternative approaches to consider would be highly valuable.

Thank you in advance for your time and assistance. My Tab page

AutoTabsScaffold(
        routes: [
          const HomeRoute(),
          SearchRoute(),
          const CoursesRoute(),
          const ProfileRoute()
        ],
        bottomNavigationBuilder: (_,tabsRouter) {
          //final tabsRouter = AutoTabsRouter.of(context);
          return WillPopScope(
            onWillPop: () async {
              if (tabsRouter.activeIndex != 0) {
                if (backStack.isNotEmpty) {
                  final previousIndex = backStack.removeLast();
                  tabsRouter.setActiveIndex(previousIndex);
                  return false; // Prevent the app from closing
                }
                return true;
              }
              backStack.clear();
              return true;
            },
            child: Container(
              height: 72,
              decoration: buildYellowBoxDecoration(),
              child: Padding(
                padding: const EdgeInsets.only(top: 6.0),
                child: Container(
                  decoration: buildGreenBoxDecoration(),
                  child: ClipRRect(
                    borderRadius: const BorderRadius.only(
                      topRight: Radius.circular(20),
                      topLeft: Radius.circular(20),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.only(top: 8.0),
                      child: buildBottomNavigationBar(
                          tabsRouter,
                          backStack,
                          homeIcon,
                          homeIconActive,
                          searchIcon,
                          searchIconActive,
                          coursesIcon,
                          coursesIconActive,
                          profileIcon,
                          profileIconActive),
                    ),
                  ),
                ),
              ),
            ),
          );
        }
        // bottomNavigationBuilder: (context, tabsRouter) {
        //     return   NumberOneAppBottomBarWidget( tabsRouter: tabsRouter,);
        //   }

        );

My router page

@AutoRouterConfig()
class AppRouter extends _$AppRouter {
  @override
  final List<AutoRoute> routes = [
    //login and onBoarding
    AutoRoute(
      page: SplashRoute.page,
      path: "/splash",
    ),
    AutoRoute(page: DashBoardRoute.page, path: "/", guards: [AuthGuard()]),
    AutoRoute(
        page: RegistrationSuccessfulRoute.page,
        path: "/registration_successful"),
    AutoRoute(page: RegistrationRoute.page, path: "/registration"),
    AutoRoute(page: LoginRoute.page, path: "/loginPage"),
    AutoRoute(page: VerifyOtpRoute.page, path: "/verifyOtp"),
    AutoRoute(page: LanguageSelectionRoute.page, path: "/languageSelect"),
    AutoRoute(
        page: OnBoardSelectEntrepreneurRoute.page,
        path: "/onboard_select_entrepreneur"),
    AutoRoute(
        page: OnBoardPreparingDataRoute.page, path: "/onboard_prepare_data"),

    AutoRoute(page: NotificationRoute.page, path: "/notifications"),
    AutoRoute(page: CourseDetailRoute.page, path: "/course_detail"),
    AutoRoute(page: VideoBuilderRoute.page, path: "/video_player/:arguments"),
    //AutoRoute(page: VideoPlayRoute.page, path: "/video_player_appinio"),

    AutoRoute(page: BundleCourseRoute.page, path: "/bundle_course_page"),

    //BottomNavigation
    AutoRoute(page: HomeTabRoute.page, path: "/", children: [
      CustomRoute(page: HomeRoute.page, path: "home_page",
      children: [
        AutoRoute(page: VideoPlayRoute.page, path: "course_details_page/:arguments"),
      ]),
      CustomRoute(page: SearchRoute.page, path: "search_route"),
      CustomRoute(page: ProfileRoute.page, path: "profile_route"),
      CustomRoute(page: CoursesRoute.page, path: "courses_route"),
    ]),
    //Admin Pages
    AutoRoute(page: AdminCourseListRoute.page, path: "/admin_course_list"),
    AutoRoute(page: AdminAddLessonRoute.page, path: "/admin_add_lesson_page"),
    AutoRoute(page: AdminAddCourseRoute.page, path: "/admin_add_course_page"),

    RedirectRoute(path: '*', redirectTo: '/'),
  ];
}

I've explored different approaches, including using a global widget for the bottom navigation bar, but it doesn't seem to work as expected. I'm unsure if I'm missing something or if there's a specific configuration I need to apply to make it work.