如何修改BottomNavigationBar的Splash Effect为全宽矩形样式？

默认水波纹效果：

想要改成的全宽矩形样式：

我已尝试使用InkResponse，但仍未达到预期效果。

解决这个问题的核心是自定义底部导航项的点击反馈区域，通过InkWell（或配置正确的InkResponse）配合容器约束，让水波纹铺满导航项的整个宽度。

具体实现方案 #

• 放弃系统默认BottomNavigationBarItem的自带反馈，自定义每个导航项的布局，用InkWell包裹占满整宽的容器。
• 给InkWell设置borderRadius: BorderRadius.zero，让水波纹呈现矩形；同时指定splashColor调整波纹颜色。
• 确保InkWell的父组件是Material，水波纹效果依赖Material的上下文才能正常渲染。

示例代码 #

BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  items: [
    _buildCustomNavItem(Icons.home, "首页"),
    _buildCustomNavItem(Icons.search, "搜索"),
    _buildCustomNavItem(Icons.person, "我的"),
  ],
)

// 自定义导航项方法
BottomNavigationBarItem _buildCustomNavItem(IconData icon, String label) {
  return BottomNavigationBarItem(
    icon: Material(
      child: InkWell(
        borderRadius: BorderRadius.zero,
        splashColor: Colors.blue.withOpacity(0.3),
        onTap: () {
          // 处理对应导航项的点击逻辑
        },
        child: Container(
          width: double.infinity,
          height: double.infinity,
          alignment: Alignment.center,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(icon),
              Text(label),
            ],
          ),
        ),
      ),
    ),
    label: "", // 自定义布局已包含文字，此处留空
  );
}

补充：用InkResponse实现的要点 #

如果坚持用InkResponse，需要额外配置两个参数：

InkResponse(
  containedInkWell: true,
  highlightShape: BoxShape.rectangle,
  borderRadius: BorderRadius.zero,
  // 其他属性和点击逻辑
)

同样要确保父容器是Material，且InkResponse包裹的容器宽度设为double.infinity。

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