Flutter BottomNavigationBar底部导航栏项间距调整问题求助

我想实现如图所示的底部导航栏样式，用图片替代图标并设置了图片宽高，但没法缩小项之间的空白间距，求解决办法。

目标效果：

当前代码：

bottomNavigationBar: !navBarHide
              ? SafeArea(
                  child: BottomNavigationBar(
                      onTap: (index) {
                        debugPrint(controller.tabIndex.toString());
                        controller.tabChange(index);
                        controller.update();
                        if (index == 0) {
                          Get.offAndToNamed('dashboard');
                        } else if (index == 1) {
                          Get.offAndToNamed('blank');
                        } else if (index == 2) {
                          Get.offAndToNamed('home');
                        } else if (index == 3) {
                          Get.offAndToNamed('blank');
                        } else if (index == 4) {
                          Get.offAndToNamed('menu');
                        }
                      },
                      unselectedLabelStyle: TextStyle(fontSize: 0),
                      unselectedFontSize: 0,
                      unselectedIconTheme: IconThemeData(
                        size: Get.width > 390 ? 24.sp : 24.sp,
                      ),
                      selectedFontSize: 0,
                      selectedIconTheme: IconThemeData(
                        size: Get.width > 390 ? 24.sm : 24.sm,
                      ),
                      selectedLabelStyle: TextStyle(fontSize: 0),
                      type: BottomNavigationBarType.fixed,
                      landscapeLayout:
                          BottomNavigationBarLandscapeLayout.spread,
                      unselectedItemColor: Colors.black,
                      selectedItemColor: Colors.orange,
                      showSelectedLabels: false,
                      showUnselectedLabels: false,
                      currentIndex: controller.tabIndex,
                      items: [
                        _bottomNavbarItem(
                          AppAssets.card_icon,
                          '',
                        ),
                        _bottomNavbarItem(
                          AppAssets.key_icon,
                          '',
                        ),
                        _bottomNavbarItem(
                          AppAssets.home_icon,
                          '',
                        ),
                        _bottomNavbarItem(
                          AppAssets.doc_icon,
                          '',
                        ),
                        _bottomNavbarItem(
                          AppAssets.menu_icon,
                          '',
                        ),
                      ]),
                )
              : null,

// ITEM方法
_bottomNavbarItem(String assetName, String label) {
  return BottomNavigationBarItem(
    icon: Image.asset(
      assetName,
      width: 25.w,
      height: 22.h,
      fit: BoxFit.contain,
    ),
    activeIcon: Container(
      width: 25.w,
      height: 22.h,
      child: Image.asset(assetName),
    ),
    label: label,
  );
}

当前实际效果：

解决方案 #

方法1：自定义底部导航栏（推荐） #

Flutter原生BottomNavigationBar有固定的内边距和布局逻辑，很难完全自定义项间距，直接用Row+GestureDetector实现更灵活：

bottomNavigationBar: !navBarHide
    ? SafeArea(
        child: Container(
          height: 60.h, // 自定义导航栏高度
          decoration: BoxDecoration(
            border: Border(top: BorderSide(color: Colors.grey.shade200)),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround, // 控制项间距，也可改用spaceEvenly或自定义padding
            children: List.generate(5, (index) {
              bool isSelected = controller.tabIndex == index;
              String assetName = '';
              switch(index) {
                case 0: assetName = AppAssets.card_icon; break;
                case 1: assetName = AppAssets.key_icon; break;
                case 2: assetName = AppAssets.home_icon; break;
                case 3: assetName = AppAssets.doc_icon; break;
                case 4: assetName = AppAssets.menu_icon; break;
              }
              return GestureDetector(
                onTap: () {
                  debugPrint(controller.tabIndex.toString());
                  controller.tabChange(index);
                  controller.update();
                  switch(index) {
                    case 0: Get.offAndToNamed('dashboard'); break;
                    case 1: Get.offAndToNamed('blank'); break;
                    case 2: Get.offAndToNamed('home'); break;
                    case 3: Get.offAndToNamed('blank'); break;
                    case 4: Get.offAndToNamed('menu'); break;
                  }
                },
                child: Image.asset(
                  assetName,
                  width: 25.w,
                  height: 22.h,
                  fit: BoxFit.contain,
                  color: isSelected ? Colors.orange : Colors.black,
                ),
              );
            }),
          ),
        ),
      )
    : null,

方法2：调整原生BottomNavigationBar布局 #

通过负padding和修改布局参数缩减间距（可能存在布局溢出风险）：

1. 将landscapeLayout改为BottomNavigationBarLandscapeLayout.centered，避免项过度分散
2. 给BottomNavigationBar套一层负水平padding：

bottomNavigationBar: !navBarHide
    ? SafeArea(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: -10.w), // 负padding缩减左右边距
          child: BottomNavigationBar(
            // 保留原有属性，修改以下两项
            landscapeLayout: BottomNavigationBarLandscapeLayout.centered,
            iconSize: 20, // 缩小图标尺寸间接压缩间距
            // ...其他原有属性不变
          ),
        ),
      )
    : null,

内容的提问来源于stack exchange，提问作者Abdullah T