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,

子项方法代码 #

_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：自定义底部导航栏（推荐） #

原生BottomNavigationBar的布局逻辑是给每个item均分宽度，即便隐藏了标签也会留默认间距，不如直接用Row自定义，完全掌控间距：

bottomNavigationBar: !navBarHide
    ? SafeArea(
        child: Container(
          height: 60, // 自定义导航栏高度
          decoration: BoxDecoration(
            border: Border(top: BorderSide(color: Colors.grey.shade200)),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround, // 按需调整，比如用spaceEvenly或手动加padding
            children: [
              _buildNavItem(AppAssets.card_icon, 0),
              _buildNavItem(AppAssets.key_icon, 1),
              _buildNavItem(AppAssets.home_icon, 2),
              _buildNavItem(AppAssets.doc_icon, 3),
              _buildNavItem(AppAssets.menu_icon, 4),
            ],
          ),
        ),
      )
    : null,

配套的子项构建方法：

Widget _buildNavItem(String assetName, int index) {
  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,
      color: controller.tabIndex == index ? Colors.orange : Colors.black,
      fit: BoxFit.contain,
    ),
  );
}

方法2：用负padding压缩原生组件间距 #

如果不想替换原生组件，可以给每个item的图标加负padding来缩减间距：

修改_bottomNavbarItem方法：

_bottomNavbarItem(String assetName, String label) {
  return BottomNavigationBarItem(
    icon: Padding(
      padding: EdgeInsets.symmetric(horizontal: -8.w), // 左右负padding，数值按需调整
      child: Image.asset(
        assetName,
        width: 25.w,
        height: 22.h,
        fit: BoxFit.contain,
      ),
    ),
    activeIcon: Padding(
      padding: EdgeInsets.symmetric(horizontal: -8.w),
      child: Container(
        width: 25.w,
        height: 22.h,
        child: Image.asset(assetName),
      ),
    ),
    label: label,
  );
}

同时可以给BottomNavigationBar加padding: EdgeInsets.symmetric(horizontal: 10.w)来调整整体左右边距。

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