Question posted in 
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
2
Answers
Navigation Issue: Ensure that the HomePage is actually being displayed when you navigate to it. If there’s an issue with navigation, it might not be displaying the expected screen.
Routing Configuration: Check if HomePage.routeName is correctly assigned and referenced. Ensure that HomePage is properly registered in the routes map.
Visibility Issue: Make sure that the CustomBottomBar widget is being
rendered within the BottomContainer widget, which is in turn rendered
within the HomePage.
Layout Issue: Verify that the CustomBottomBar widget is given
sufficient space to be displayed. If it’s constrained by its parent’s
size, it might not be visible.
Debugging: Use Flutter’s debugging tools like print statements or
debug breakpoints to check if the code execution is reaching the
parts responsible for rendering the bottom navigation bar.
Based on Your Code Snippet the bug in this Section of BottomNavigationBarItem() class this item there’s paramter Called (label) it’s should be found and give it value from your model as you passed it ( bottomMenuList[index].title!,)
finally you don’t need to create your custom widget for text to be under the icon because BottomNavigationBarItem() giving you this option you can copy this snippet of code after fixing it and try it