Flutter中如何实现带自定义圆角的BottomNavigationBar？

我用Container实现了带顶部圆角的底部导航栏容器，但把BottomNavigationBar作为子组件后，导航栏变回扁平样式，外层的圆角被完全覆盖了。我想要实现Figma设计的带顶部圆角的底部导航效果，以下是我的代码：

return Scaffold(
  backgroundColor: AppColors.primaryColor,
  bottomNavigationBar: Container(
    height: 75.h,
    width: 400,
    decoration: BoxDecoration(
      color: AppColors.secondaryColor,
      borderRadius: BorderRadius.only(
        topRight: Radius.circular(25.r),
        topLeft: Radius.circular(25.r),
      ),
    ),
    child: BottomNavigationBar(
      onTap: changePage,
      currentIndex: currentIndex,
      items: [
        BottomNavigationBarItem(
          label: AppStrings.home,
          icon: ImageIcon(
            AssetImage(AppImages.home),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
        BottomNavigationBarItem(
          label: AppStrings.deals,
          icon: ImageIcon(
            AssetImage(AppImages.deals),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
        BottomNavigationBarItem(
          label: AppStrings.orders,
          icon: ImageIcon(
            AssetImage(AppImages.orders),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
        BottomNavigationBarItem(
          label: AppStrings.cart,
          icon: ImageIcon(
            AssetImage(AppImages.cart),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
        BottomNavigationBarItem(
          label: AppStrings.settings,
          icon: ImageIcon(
            AssetImage(AppImages.settings),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
      ],
    ),
  ),
  body: pages[currentIndex],
);

问题根源是BottomNavigationBar默认自带背景色和阴影，会完全覆盖外层Container的样式。只需要给BottomNavigationBar加几个关键属性，再微调布局细节就能解决：

1. 设置backgroundColor: Colors.transparent，让外层Container的背景色和圆角透出来
2. 设置elevation: 0，移除BottomNavigationBar自带的阴影
3. 因为有5个导航项，必须设置type: BottomNavigationBarType.fixed，避免item被压缩或溢出

修改后的完整代码：

return Scaffold(
  backgroundColor: AppColors.primaryColor,
  bottomNavigationBar: Container(
    height: 75.h,
    width: double.infinity, // 替换固定宽度为自适应，适配不同屏幕
    decoration: BoxDecoration(
      color: AppColors.secondaryColor,
      borderRadius: BorderRadius.only(
        topRight: Radius.circular(25.r),
        topLeft: Radius.circular(25.r),
      ),
    ),
    child: BottomNavigationBar(
      onTap: changePage,
      currentIndex: currentIndex,
      // 核心改动：透明背景+移除阴影
      backgroundColor: Colors.transparent,
      elevation: 0,
      // 5个item必须设置fixed类型，防止布局异常
      type: BottomNavigationBarType.fixed,
      // 可选：区分选中/未选中状态，提升交互体验
      selectedItemColor: AppColors.whiteColor,
      unselectedItemColor: AppColors.whiteColor.withOpacity(0.7),
      items: [
        BottomNavigationBarItem(
          label: AppStrings.home,
          icon: ImageIcon(
            AssetImage(AppImages.home),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
        BottomNavigationBarItem(
          label: AppStrings.deals,
          icon: ImageIcon(
            AssetImage(AppImages.deals),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
        BottomNavigationBarItem(
          label: AppStrings.orders,
          icon: ImageIcon(
            AssetImage(AppImages.orders),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
        BottomNavigationBarItem(
          label: AppStrings.cart,
          icon: ImageIcon(
            AssetImage(AppImages.cart),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
        BottomNavigationBarItem(
          label: AppStrings.settings,
          icon: ImageIcon(
            AssetImage(AppImages.settings),
            color: AppColors.whiteColor,
            size: 30,
          ),
        ),
      ],
    ),
  ),
  body: pages[currentIndex],
);

额外优化提示：

• 把Container的固定宽度400改成double.infinity，适配不同尺寸的屏幕
• 可以通过selectedFontSize和unselectedFontSize调整文字大小，更贴近设计稿

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