Flutter BottomNavigationBar子项底部溢出问题修复请求

问题描述 #

BottomNavigationBar子项出现底部溢出错误，报错信息如下：

Another exception was thrown: A RenderFlex overflowed by 24 pixels on the bottom.
Another exception was thrown: A RenderFlex overflowed by 24 pixels on the bottom.
Another exception was thrown: A RenderFlex overflowed by 47 pixels on the bottom.
Another exception was thrown: A RenderFlex overflowed by 24 pixels on the bottom.
Another exception was thrown: A RenderFlex overflowed by 24 pixels on the bottom.

The relevant error-causing widget was:
BottomNavigationBar
BottomNavigationBar:file:///Users/macbook/Desktop/frontend/lib/widgets/BottomNavigation.dart:142:22
On => child: BottomNavigationBar(

要求保留现有样式，不使用SafeArea组件。

修复步骤 #

1. 清除BottomNavigationBar默认内边距 #

BottomNavigationBar默认带有底部内边距，即使部分项标签为空，仍会占用空间导致溢出。添加padding: EdgeInsets.zero消除默认内边距：

BottomNavigationBar(
  padding: EdgeInsets.zero, // 新增该行
  items: _buildBottomNavBarItems(),
  // 其他现有属性...
)

2. 优化中间圆形图标容器 #

中间项的图标容器高度设为55px过大，结合外层容器高度容易溢出。调整容器尺寸，并通过Alignment.center确保图标居中，同时适配图标大小：

BottomNavigationBarItem(
  icon: Container(
    height: 45.0, // 从55调整为45
    width: 45.0,  // 从50调整为45
    decoration: const BoxDecoration(
      shape: BoxShape.circle,
      color: Color.fromARGB(218, 244, 67, 54),
    ),
    child: const Align( // 新增Align确保图标居中
      alignment: Alignment.center,
      child: Icon(
        Icons.location_on,
        size: 28.0, // 从31调整为28，适配容器大小
        color: Colors.white,
      ),
    ),
  ),
  label: '',
),

3. 调整外层容器高度与内边距 #

外层Container的高度和底部padding可以微调，避免挤压内部元素空间：

bottomNavigationBar: Padding(
  padding: const EdgeInsets.only(bottom: 8.0, left: 6, right: 6), // bottom从15调整为8
  child: Container(
    height: 80, // 从85调整为80
    padding: const EdgeInsets.symmetric(horizontal: 16.0),
    // 其他现有属性...
  ),
),

修改后的完整代码片段 #

@override
Widget build(BuildContext context) {
  checkTokenAvailability(); 

  return Scaffold(
    extendBody: true,
    backgroundColor: Colors.white,
    body: IndexedStack(
      index: _selectedIndex,
      children: _widgetOptions,
    ),
    bottomNavigationBar: Padding(
      padding: const EdgeInsets.only(bottom: 8.0, left: 6, right: 6),
      child: Container(
        height: 80,
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30.0),
          border: Border.all(
            color: const Color.fromARGB(255, 194, 187, 187),
            width: 2.0,
          ),
          color: Colors.white,
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(30.0),
          child: BottomNavigationBar(
            padding: EdgeInsets.zero,
            items: _buildBottomNavBarItems(),
            currentIndex: _selectedIndex,
            onTap: _onItemTapped,
            selectedLabelStyle: const TextStyle(
              color: Colors.black,
              fontFamily: 'Poppins',
            ),
            unselectedLabelStyle: const TextStyle(
              color: Colors.black,
              fontFamily: 'Poppins',
            ),
            selectedIconTheme: const IconThemeData(size: 29),
            selectedFontSize: 14,
            unselectedFontSize: 12,
            type: BottomNavigationBarType.fixed,
            selectedItemColor: Color.fromARGB(255, 0, 0, 0),
            unselectedItemColor: Color.fromARGB(187, 0, 0, 0),
            backgroundColor: Colors.white,
            elevation: 5,
          ),
        ),
      ),
    ),
  );
}

// Helper function to build BottomNavigationBarItems
List<BottomNavigationBarItem> _buildBottomNavBarItems() {
  List<BottomNavigationBarItem> items = [
    const BottomNavigationBarItem(
      icon: Padding(
        padding: EdgeInsets.only(top: 8.0),
        child: Icon(Icons.login),
      ),
      label: 'Login',
    ),
    const BottomNavigationBarItem(
      icon: Padding(
        padding: EdgeInsets.only(top: 8.0),
        child: Icon(Icons.local_car_wash),
      ),
      label: 'Carwash',
    ),
    BottomNavigationBarItem(
      icon: Container(
        height: 45.0,
        width: 45.0,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Color.fromARGB(218, 244, 67, 54),
        ),
        child: const Align(
          alignment: Alignment.center,
          child: Icon(
            Icons.location_on,
            size: 28.0,
            color: Colors.white,
          ),
        ),
      ),
      label: '',
    ),
    const BottomNavigationBarItem(
      icon: Padding(
        padding: EdgeInsets.only(top: 8.0),
        child: Icon(Icons.home),
      ),
      label: 'For You',
    ),
    const BottomNavigationBarItem(
      icon: Padding(
        padding: EdgeInsets.only(top: 8.0),
        child: Icon(Icons.account_circle),
      ),
      label: 'Profile',
    ),
  ];

  return items;
}

内容的提问来源于stack exchange，提问作者Bahadur Khan