Flutter中如何创建带堆叠效果的圆角底部导航栏菜单项？

1. 修复边缘不透明问题 #

如果你的底部栏是通过showModalBottomSheet展示的，默认弹窗背景会覆盖圆角区域，导致边缘看起来不透明。只需将弹窗的backgroundColor设为透明，同时保留内层容器的圆角装饰即可。

2. 实现图标悬浮效果 #

使用InkWell包裹图标组件，结合状态变量控制缩放动画，点击时触发悬浮效果（缩放+颜色变化）。

以下是完整的示例代码：

void showCustomBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    backgroundColor: Colors.transparent, // 关键：设置弹窗背景透明
    builder: (context) {
      return StatefulBuilder(
        builder: (context, setState) {
          // 记录选中的图标索引
          int selectedIndex = 0;
          return Container(
            height: 300.0,
            color: Colors.transparent,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.green,
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(40.0),
                  topRight: Radius.circular(40.0),
                ),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  // 首页图标
                  buildIconItem(
                    icon: Icons.home,
                    isSelected: selectedIndex == 0,
                    onTap: () => setState(() => selectedIndex = 0),
                  ),
                  // 搜索图标
                  buildIconItem(
                    icon: Icons.search,
                    isSelected: selectedIndex == 1,
                    onTap: () => setState(() => selectedIndex = 1),
                  ),
                  // 加号图标（悬浮突出效果）
                  buildFloatingIcon(),
                  // 消息图标
                  buildIconItem(
                    icon: Icons.message,
                    isSelected: selectedIndex == 2,
                    onTap: () => setState(() => selectedIndex = 2),
                  ),
                  // 我的图标
                  buildIconItem(
                    icon: Icons.person,
                    isSelected: selectedIndex == 3,
                    onTap: () => setState(() => selectedIndex = 3),
                  ),
                ],
              ),
            ),
          );
        },
      );
    },
  );
}

// 构建带悬浮效果的图标项
Widget buildIconItem({
  required IconData icon,
  required bool isSelected,
  required VoidCallback onTap,
}) {
  return InkWell(
    onTap: onTap,
    child: AnimatedContainer(
      duration: const Duration(milliseconds: 200),
      transform: isSelected ? Matrix4.scale(1.2) : Matrix4.identity(),
      child: Icon(
        icon,
        size: 32,
        color: isSelected ? Colors.white : Colors.grey[300],
      ),
    ),
  );
}

// 构建中间突出的悬浮加号图标
Widget buildFloatingIcon() {
  return Container(
    width: 60,
    height: 60,
    decoration: const BoxDecoration(
      color: Colors.white,
      shape: BoxShape.circle,
      boxShadow: [
        BoxShadow(
          color: Colors.black26,
          blurRadius: 8,
          offset: Offset(0, -2),
        ),
      ],
    ),
    child: const Icon(
      Icons.add,
      size: 36,
      color: Colors.green,
    ),
  );
}

关键说明 #

• 透明边缘修复：showModalBottomSheet的backgroundColor: Colors.transparent让圆角区域透出底层内容，避免默认背景色遮挡。
• 图标悬浮效果：通过AnimatedContainer实现选中时的缩放动画，同时切换图标颜色；中间的加号图标通过圆形背景和阴影实现突出悬浮效果。
• 交互反馈：InkWell提供点击波纹效果，提升用户体验。

内容的提问来源于stack exchange，提问作者ankit.karan99