On the Samsung Galaxy S23 with android version 15 and One ui 7, there is a bottom system nav bar. Does anyone have any idea how to handle the nav height? is overflowing on the app.
I have trying SafeArea, my solution is
SizedBox(
height: controller.isVisible.value ? 80 : 0,
child: SafeArea(
bottom: true,
top: false,
child: MyBottomNavBar(
onItemSelected: controller.onMenuSelected,
selectedIndex: controller.lastSelectedIndex.value,
),
),
);
I'm also using this method to get the height of system nav bar,
/// Returns the height of the bottom system navigation bar (if present).
static double getBottomSystemBarHeight(BuildContext context) {
final viewPadding = MediaQuery.of(context).viewPadding;
final viewInsets = MediaQuery.of(context).viewInsets;
// Return bottom padding only if the keyboard is not open
return viewInsets.bottom == 0 ? viewPadding.bottom : 0;
}
I have used this returned value as bottom padding of MyBottomNavBar class
Container(
padding: EdgeInsets.only(
bottom: DeviceUtils.getBottomSystemBarHeight(context),
),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withValues(alpha: 0.5),
spreadRadius: 3,
blurRadius: 4,
offset: Offset(0, 3),
),
],
),
child: BottomNavigationBar(
key: bottomNavKey,
items: _navItemBuilder(navItems),
elevation: 10,
showSelectedLabels: true,
showUnselectedLabels: true,
selectedFontSize: 10,
unselectedFontSize: 10,
selectedLabelStyle: TextStyle(fontFamily: 'Poppins'),
type: BottomNavigationBarType.fixed,
backgroundColor: AppColors.pageBackground,
currentIndex: navController.selectedIndex,
onTap: (index) {
navController.updateSelectedIndex(index);
onItemSelected(navItems[index].menuCode);
},
),
),
On devices like the S23, the bottom navigation bar overflows or gets partially hidden behind the system nav bar.
When I encountered this issue, I resolved the overlapping problem globally by adding the following code:
MaterialApp(
builder: (context, child) {
return SafeArea(
top: false, // Set to true if you want to avoid notch overlap too
bottom: true, // Avoids overlap with navigation bar
child: child!,
);
},
home: YourHomePage(), // Or your main screen
);