so i just made a bottom navigation bar. the problem is my bottom navbar is gone when i push to other page like the whole page is replaced.

i’ve searching any tutorial mostly just showing how to make the bottom navbar but not showing until if we have a button inside “root pages of navigation”. (check home_page.dart)

or after inside the bottomnav pages, i shouldnt use the Navigator.push again ?

i’m aware there is a package persistent_bottom_nav_bar_v2, but is this the only way ?

i also made other project with basic navbar using plain setstate, but same result.
is there anything i missed or using the package is the only way ? thank you.

class MainWrapperController extends GetxController {
  final Rx<int> _selectedIndex = 0.obs;

  int get selectedIndex => _selectedIndex.value;

  void setSelectedIndex(int index) => _selectedIndex.value = index;

  List<NavigationItemModel> navItemModels = [
    NavigationItemModel(
      navigatorKey: GlobalKey<NavigatorState>(),
      title: "Home",
      icon: Icons.home,
      page: const HomePage(),
    ),
    NavigationItemModel(
      navigatorKey: GlobalKey<NavigatorState>(),
      title: "Report",
      icon: Icons.equalizer,
      page: const ReportMenuPage(),
    ),
    NavigationItemModel(
      navigatorKey: GlobalKey<NavigatorState>(),
      title: "Profile",
      icon: Icons.person,
      page: const ProfilePage(),
    ),
  ];
}

main_wrapper.dart

class MainWrapper extends StatefulWidget {
  const MainWrapper({super.key});

  @override
  State<MainWrapper> createState() => _MainWrapperState();
}

class _MainWrapperState extends State<MainWrapper> {
  var mainWrapperController = Get.find<MainWrapperController>();

  @override
  Widget build(BuildContext context) {
    var navPages = mainWrapperController.navItemModels
        .map(
          (item) => Navigator(
            key: item.navigatorKey,
            onGenerateRoute: (setting) {
              return MaterialPageRoute(builder: (context) => item.page);
            },
          ),
        )
        .toList();

    var navItems = mainWrapperController.navItemModels
        .map((item) =>
            BottomNavigationBarItem(icon: Icon(item.icon), label: item.title))
        .toList();

    return PopScope(
      canPop: false,
      onPopInvoked: (state) {},
      child: Scaffold(
        body: Obx(
          () => IndexedStack(
            index: mainWrapperController.selectedIndex,
            children: navPages,
          ),
        ),
        bottomNavigationBar: Obx(
          () => BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            selectedFontSize: 0,
            unselectedFontSize: 0,
            backgroundColor: Colors.white,
            selectedItemColor: ColorConstant.selectedIcon,
            showSelectedLabels: false,
            showUnselectedLabels: false,
            items: navItems,
            iconSize: 36,
            onTap: (index) => mainWrapperController.setSelectedIndex(index),
            currentIndex: mainWrapperController.selectedIndex,
          ),
        ),
      ),
    );
  }
}

home_page.dart

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: ColorConstant.background,
        body: Column(
          children: [
            // here when i push, the whole page is changed not persisting bottom navbar
            SimpleButtonWidget(
              onPressed: () => Get.to(const NextPage()),
              text: 'Click Me',
            )
          ],
        ));
  }
}

next_page.dart

class NextPage extends StatelessWidget {
  const NextPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text("HELLO FROM NEXT PAGE");
  }
}

expecting the bottom navbar not disappear when navigating from inside the “root pages of navigation” (see home_page.dart).