Flutter – Unable to view my Bottom Nav menu items in HomePage

so I have created a custom bottom Navigation Menu bar, to be used across multiple screens, and for each item to represent each item on the Bottom Nav menu item. Unfortunately I am unable to view the bar or the items, even on my home Page.

This is my two classes that represent the custom bottom nav bar screen:

This is the custom bottom menu modal class;

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:omnifix/constants.dart';
import 'package:omnifix/themes/theme.dart';
import 'package:omnifix/utils/sizes.dart';

///The actual Custom constructor of the Bottom Navigation Bar for each page.

class CustomBottomBar extends StatefulWidget {
  const CustomBottomBar({super.key, this.onChanged});

  final Function(BottomBarEnum)? onChanged;

  @override
  State<CustomBottomBar> createState() => _CustomBottomBarState();
}

class _CustomBottomBarState extends State<CustomBottomBar> {
  int selectedIndex = 0;

  List<BottomMenuModel> bottomMenuList = [
    BottomMenuModel(
      icon: Icons.warehouse_outlined,
      activeIcon: Icons.warehouse_outlined,
      type: BottomBarEnum.dashboard,
      title: "lbl_dashboard".tr(),
    ),
    BottomMenuModel(
      icon: CupertinoIcons.wrench,
      activeIcon: CupertinoIcons.wrench,
      type: BottomBarEnum.repairs,
      title: "lbl_repair".tr(),
    ),
    BottomMenuModel(
      icon: Icons.near_me_outlined,
      activeIcon: Icons.near_me_outlined,
      type: BottomBarEnum.nearMe,
      title: "lbl_near".tr(),
    ),
    BottomMenuModel(
      icon: Icons.car_crash_outlined,
      activeIcon: Icons.car_crash_outlined,
      type: BottomBarEnum.spares,
      title: "lbl_spares".tr(),
    ),
    BottomMenuModel(
      icon: CupertinoIcons.person,
      activeIcon: CupertinoIcons.person,
      type: BottomBarEnum.profile,
      title: "lbl_profiles".tr(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: getHeight(46),
      child: BottomNavigationBar(
        backgroundColor: Colors.red,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        selectedFontSize: 0,
        elevation: 0,
        currentIndex: selectedIndex,
        type: BottomNavigationBarType.fixed,
        items: List.generate(bottomMenuList.length, (index) {
          return BottomNavigationBarItem(
            icon: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Icon(
                  bottomMenuList[index].icon,
                  size: getWidth(20),
                  color: PrimaryColors.gray900,
                ),
                Padding(
                  padding: EdgeInsets.only(top: getHeight(10)),
                  child: Text(
                    bottomMenuList[index].title!,
                    style: TextThemes.textTheme(primaryColorScheme)
                        .bodySmall!
                        .copyWith(
                          color: PrimaryColors.gray900,
                        ),
                  ),
                ),
              ],
            ),
            activeIcon: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Icon(
                  bottomMenuList[index].icon,
                  size: getWidth(20),
                  color: PrimaryColors.teal400,
                ),
                Padding(
                  padding: EdgeInsets.only(top: getHeight(9)),
                  child: Text(
                    bottomMenuList[index].title!,
                    textAlign: TextAlign.center,
                    style: TextThemes.textTheme(primaryColorScheme)
                        .bodySmall!
                        .copyWith(
                          color: PrimaryColors.teal400,
                        ),
                  ),
                ),
              ],
            ),
          );
        }),
        onTap: (index) {
          selectedIndex = index;
          widget.onChanged?.call(bottomMenuList[index].type);
          setState(() {});
        },
      ),
    );
  }
}

///The type enum of each screen on the bottom Nav bar
enum BottomBarEnum {
  dashboard,
  repairs,
  nearMe,
  spares,
  profile,
}

///Constructor for the Bottom Navigation Bar icons that represent the screens
class BottomMenuModel {
  BottomMenuModel(
      {required this.icon,
      required this.activeIcon,
      this.title,
      required this.type});

  IconData icon;
  IconData activeIcon;
  String? title;
  BottomBarEnum type;
}

This is the home_screen_bottom_container class, I hope you understand this class as it works with the above class.

import 'package:flutter/material.dart';
import 'package:omnifix/routes.dart';
import 'package:omnifix/screens/home_screen/home_page.dart';
import 'package:omnifix/utils/sizes.dart';
import 'package:omnifix/widgets/custom_bottom_bar_tools/custom_bottom_menu_modal.dart';

class BottomContainer extends StatelessWidget {
  BottomContainer({super.key});

  final GlobalKey<NavigatorState> navigatorKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return SafeArea(
        child: Scaffold(
            body: Navigator(
                key: navigatorKey,
                initialRoute: HomePage.routeName,
                onGenerateRoute: (routeSetting) => PageRouteBuilder(
                    pageBuilder: (ctx, ani, ani1) =>
                        routes[routeSetting.name]!(ctx),
                    transitionDuration: const Duration(seconds: 0))),
            bottomNavigationBar: Padding(
                padding:
                    EdgeInsets.only(left: getWidth(12), right: getWidth(16)),
                child: _buildBottomBar(context))));
  }

  ///Section Widget
  Widget _buildBottomBar(BuildContext context) {
    return CustomBottomBar(onChanged: (BottomBarEnum type) {
      switch (type) {
        case BottomBarEnum.dashboard:
          navigatorKey.currentState!.pushNamed(HomePage.routeName);
          break;

        default:
          break;
      }
    });
  }
}

I also paste the homepage screen here as a sample of the homepage;

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {

  static String routeName = "/home_page";

  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('HomeScreen'),
      ),
    );
  }
}

and I don’t know if adding this class will help but let me paste it anyways, as it serves as the routes assignments of each screen across the application.

import 'package:flutter/material.dart';
import 'package:omnifix/screens/create_new_password_screen/new_password_screen.dart';
import 'package:omnifix/screens/email_verification_screen/email_verification_screen.dart';
import 'package:omnifix/screens/forgot_password_screen/forgot_password_screen.dart';
import 'package:omnifix/screens/home_screen/home_page.dart';
import 'package:omnifix/screens/login/login_screen.dart';
import 'package:omnifix/screens/otp_verification_screen/otp_screen_via_email.dart';
import 'package:omnifix/screens/otp_verification_screen/otp_screen_via_sms.dart';
import 'package:omnifix/screens/register/registration_screen.dart';
import 'package:omnifix/screens/splash/splash_screen.dart';


final Map<String, WidgetBuilder> routes = {
  SplashScreen.routeName: (context) => const SplashScreen(),
  LoginScreen.routeName: (context) => const LoginScreen(),
  SignUpScreen.routeName: (context) => const SignUpScreen(),
  VerificationScreenViaSMS.routeName: (context) => const VerificationScreenViaSMS(),
  VerificationScreenViaEmail.routeName: (context) => const VerificationScreenViaEmail(),
  EmailVerificationScreen.routeName: (context) => const EmailVerificationScreen(),
  ForgotPasswordScreen.routeName: (context) => const ForgotPasswordScreen(),
  CreateNewPasswordScreen.routeName: (context) => const CreateNewPasswordScreen(),
  HomePage.routeName: (context) => const HomePage(),

};

I don’t know why it is not showing in the homepage screen. I cannot see the bottom nav bar and items