Flutter顶部弧形底部导航栏实现问题求助

效果对比 #

• 目标效果：底部导航栏顶部呈现大弧度圆角，整体为向上凹陷的弧形，搭配阴影效果
• 实际效果：导航栏顶部圆角未正常显示，底部导航栏的默认背景覆盖了外层容器的圆角，弧形效果失效

问题代码 #

bottomNavigationBar: Container(
  decoration: const BoxDecoration(
    borderRadius: BorderRadius.only(topRight: Radius.circular(500),topLeft: Radius.circular(500),),
    color: Color(0xfff2f2f2),
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
        offset: Offset(5.0, 10.0), //(x,y)
        blurRadius: 20.0,
      ),
    ],
  ),
  child: ClipRRect(
    borderRadius: const BorderRadius.only(topRight: Radius.circular(500),topLeft: Radius.circular(500),),
    child: BottomNavigationBar(
      items: [
        BottomNavigationBarItem(icon: Image.asset(logo,height: HDW().fullHeight(context: context,height: 0.1),color: darkGreen,),label: ''),
        BottomNavigationBarItem(icon: Image.asset(logo,height: HDW().fullHeight(context: context,height: 0.1),color: darkGreen,),label: ''),
      ],
    ),
  ),
),

问题原因 #

BottomNavigationBar默认自带背景色，会完全覆盖外层Container的背景和圆角设置；同时ClipRRect的裁切仅作用于子组件内容，无法穿透BottomNavigationBar的默认背景，导致弧形效果失效。

解决代码 #

bottomNavigationBar: Container(
  decoration: const BoxDecoration(
    borderRadius: BorderRadius.only(
      topRight: Radius.circular(500),
      topLeft: Radius.circular(500),
    ),
    color: Color(0xfff2f2f2),
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
        offset: Offset(5.0, 10.0), //(x,y)
        blurRadius: 20.0,
      ),
    ],
  ),
  child: BottomNavigationBar(
    backgroundColor: Colors.transparent, // 设为透明，显示外层容器的背景和圆角
    elevation: 0, // 移除自带阴影，避免和外层阴影冲突
    items: [
      BottomNavigationBarItem(
        icon: Image.asset(
          logo,
          height: HDW().fullHeight(context: context, height: 0.1),
          color: darkGreen,
        ),
        label: '',
      ),
      BottomNavigationBarItem(
        icon: Image.asset(
          logo,
          height: HDW().fullHeight(context: context, height: 0.1),
          color: darkGreen,
        ),
        label: '',
      ),
    ],
  ),
),

说明 #

1. 把BottomNavigationBar的backgroundColor设为透明，让外层Container的背景和圆角正常显示
2. 关闭elevation属性，移除导航栏自带阴影，避免和外层阴影重叠
3. 无需再使用ClipRRect，外层Container的圆角可直接作用于导航栏

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