Bottom System Navigation Bar Overflow

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
);