I have implemented a ModalBottomSheet in my Flutter app that is displayed when I click on the menu icon of the persistent bottom navigation bar. However, I'm facing an issue where the ModalBottomSheet covers the persistent bottom navigation bar instead of appearing above it. I have tried various solutions, such as setting useRootNavigator: true and using margin bottom, but none of them have worked for me.
Can someone please assist me in resolving this issue?
Here's the code :
ShowModalBottomSheet:
PersistentBottomNavBarItem(
icon: const ImageIcon(AssetImage("lib/assets/icons/menu.png")),
activeColorPrimary: Constants.primaryColor,
inactiveColorPrimary: Constants.lightBlue,
onPressed: (p0) {
showModalBottomSheet(
useRootNavigator: true,
useSafeArea: true,
context: context,
backgroundColor: Constants.primaryColor,
builder: (context) {
return const SizedBox(
height: 400,
child: Padding(
padding:
EdgeInsets.symmetric(vertical: 40, horizontal: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Profile",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
ImageIcon(
AssetImage(
"lib/assets/icons/next.png",
),
color: Colors.white,
)
],
),
Divider(color: Colors.white24),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"My Appointments",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
ImageIcon(
AssetImage(
"lib/assets/icons/next.png",
),
color: Colors.white,
)
],
),
Divider(color: Colors.white24),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Setting",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
ImageIcon(
AssetImage(
"lib/assets/icons/next.png",
),
color: Colors.white,
)
],
),
Divider(color: Colors.white24),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Help & Support",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
ImageIcon(
AssetImage(
"lib/assets/icons/next.png",
),
color: Colors.white,
)
],
),
Divider(color: Colors.white24),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Log Out",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
ImageIcon(
AssetImage(
"lib/assets/icons/next.png",
),
color: Colors.white,
)
],
),
],
),
),
);
});
}),`
Scaffold :
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: _buildScreens()[_screen],
bottomNavigationBar: PersistentTabView(
hideNavigationBar: false,
navBarHeight: 70,
context,
controller: _controller,
screens: _buildScreens(),
items: _navBarsItems(),
confineInSafeArea: true,
backgroundColor: Colors.white, // Default is Colors.white.
handleAndroidBackButtonPress: true, // Default is true.
resizeToAvoidBottomInset:
false, // This needs to be true if you want to move up the screen when keyboard appears. Default is true.
stateManagement: true, // Default is true.
hideNavigationBarWhenKeyboardShows:
true, // Recommended to set 'resizeToAvoidBottomInset' as true while using this argument. Default is true.
decoration: const NavBarDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(
30,
),
topLeft: Radius.circular(
30,
),
),
colorBehindNavBar: Colors.white,
boxShadow: [
BoxShadow(
color: Color(0xffDDDDDD),
blurRadius: 4.0,
spreadRadius: 1.0,
offset: Offset(0.0, 0.0),
)
],
),
popAllScreensOnTapOfSelectedTab: true,
popActionScreens: PopActionScreensType.all,
itemAnimationProperties: const ItemAnimationProperties(
// Navigation Bar's items animation properties.
duration: Duration(milliseconds: 200),
curve: Curves.ease,
),
screenTransitionAnimation: const ScreenTransitionAnimation(
// Screen transition animation on change of selected tab.
animateTabTransition: true,
curve: Curves.ease,
duration: Duration(milliseconds: 200),
),
navBarStyle: NavBarStyle
.style1, // Choose the nav bar style with this property.
),
),
);
}
}
I tried a few approaches to address the issue of the ModalBottomSheet covering the persistent bottom navigation bar, but unfortunately, none of them yielded the desired outcome.
First, I attempted to set the useRootNavigator property to true when displaying the ModalBottomSheet. This is commonly suggested to ensure that the ModalBottomSheet is rendered in the context of the root navigator, which should prevent it from covering the persistent bottom navigation bar. However, this solution did not work in my case.
Next, I experimented with adjusting the bottom margin of the ModalBottomSheet. By applying a negative margin or reducing the height of the ModalBottomSheet, I expected to create space for the persistent bottom navigation bar to be visible. Regrettably, this approach did not produce the desired result either.
I also explored the possibility of altering the z-index of the persistent bottom navigation bar and the ModalBottomSheet. I attempted to set a higher z-index value for the persistent bottom navigation bar, hoping that it would be rendered above the ModalBottomSheet. However, this approach did not resolve the issue either.
Despite my efforts, I have not yet found a satisfactory solution to this problem. I am open to suggestions and alternative approaches from the community to help overcome this challenge.
