如何在Flutter底部导航栏中实现内阴影效果？

原生Flutter实现 #

方案1：ClipPath + BoxDecoration #

通过裁剪容器，让阴影仅在内部区域显示：

ClipPath(
  clipper: _InnerShadowClipper(),
  child: Container(
    height: 60,
    decoration: BoxDecoration(
      color: Colors.white,
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.5),
          blurRadius: 10,
          offset: const Offset(0, -2),
        ),
      ],
    ),
    child: BottomNavigationBar(
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
        BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
      ],
    ),
  ),
)

class _InnerShadowClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

方案2：ShaderMask #

利用渐变着色器快速实现顶部内阴影：

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.grey.withOpacity(0.3), Colors.transparent],
      stops: const [0, 0.1],
    ).createShader(bounds);
  },
  blendMode: BlendMode.srcOver,
  child: BottomNavigationBar(
    backgroundColor: Colors.white,
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
    ],
  ),
)

第三方库方案 #

使用flutter_inner_shadow库简化开发：

1. 在pubspec.yaml添加依赖：

dependencies:
  flutter_inner_shadow: ^1.0.0

2. 代码示例：

InnerShadow(
  shadows: [
    Shadow(
      color: Colors.grey.withOpacity(0.5),
      blurRadius: 8,
      offset: const Offset(0, -2),
    ),
  ],
  child: BottomNavigationBar(
    backgroundColor: Colors.white,
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
    ],
  ),
)

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