Flutter中为BackdropFilter添加外部阴影（避免内部显示阴影）

我需要实现指定的毛玻璃按钮设计，目前已完成深色、浅色模式下的基础效果，但遇到一个问题：给BackdropFilter添加阴影时，阴影会显示在Widget内部，不符合设计需求。

现有代码实现 #

使用示例

class SettingsButton extends StatelessWidget {
  const SettingsButton({super.key});

  @override
  Widget build(BuildContext context) {
    final themeColor = Theme.of(context).colorScheme;
    final borderColor = Provider.of<ThemeProvider>(context).isDarkMode
        ? themeColor.onSurface.withOpacity(0.12)
        : themeColor.onSurface.withOpacity(0.12);
    return FrostedGlassBox(
      borderRadius: 15.r,
      child: AnimatedButton(
        onTap: () {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => const SettingScreen(),
            ),
          );
        },
        child: Container(
          height: 50.h,
          width: 50.h,
          padding: EdgeInsets.all(12.h),
          decoration: BoxDecoration(
              color: themeColor.outlineVariant,
              borderRadius: BorderRadius.circular(15.w),
              border: Border.all(color: borderColor)),
          child: SvgPicture.asset(CustomAssets.kFilter,
              height: 18.h,
              width: 18.h,
              colorFilter: ColorFilter.mode(
                themeColor.secondaryContainer,
                BlendMode.srcIn,
              )),
        ),
      ),
    );
  }
}

自定义毛玻璃Widget

class FrostedGlassBox extends StatelessWidget {
  final Widget child;
  final double borderRadius;

  const FrostedGlassBox({
    super.key,
    required this.child,
    required this.borderRadius,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context).colorScheme;
    final isDarkMode = Provider.of<ThemeProvider>(context).isDarkMode;
    return ClipRRect(
      borderRadius: BorderRadius.circular(borderRadius),
      child: Container(
        color:
            isDarkMode ? Colors.transparent : theme.surface.withOpacity(0.20),
        child: BackdropFilter(
          blendMode: BlendMode.srcOver,
          filter: ImageFilter.blur(
            sigmaX: 5.0,
            sigmaY: 5.0,
          ),
          child: child,
        ),
      ),
    );
  }
}

问题原因 #

之前的阴影如果是加在内部子Widget的decoration中，会被BackdropFilter的模糊效果影响，导致阴影显示在组件内部。正确的做法是将阴影作为整个毛玻璃组件的外部视觉效果，放在BackdropFilter的外层。

解决方案一：调整现有结构添加外部阴影 #

修改FrostedGlassBox，在最外层增加带阴影的容器，同时用ClipRRect保证阴影和组件的圆角一致：

class FrostedGlassBox extends StatelessWidget {
  final Widget child;
  final double borderRadius;

  const FrostedGlassBox({
    super.key,
    required this.child,
    required this.borderRadius,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context).colorScheme;
    final isDarkMode = Provider.of<ThemeProvider>(context).isDarkMode;
    
    return Container(
      // 外层添加阴影，圆角与内部保持一致
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(borderRadius),
        boxShadow: [
          BoxShadow(
            color: isDarkMode 
                ? Colors.black.withOpacity(0.3) 
                : Colors.grey.withOpacity(0.15),
            blurRadius: 8,
            offset: const Offset(0, 2),
            spreadRadius: 1,
          ),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(borderRadius),
        child: Container(
          color: isDarkMode ? Colors.transparent : theme.surface.withOpacity(0.20),
          child: BackdropFilter(
            blendMode: BlendMode.srcOver,
            filter: ImageFilter.blur(
              sigmaX: 5.0,
              sigmaY: 5.0,
            ),
            child: child,
          ),
        ),
      ),
    );
  }
}

这样阴影会显示在毛玻璃组件的外部，同时ClipRRect会裁剪掉阴影的圆角溢出部分，完全符合设计需求。

解决方案二：替代BackdropFilter的实现方案 #

如果担心BackdropFilter的性能问题，可以用以下替代方案：

• 使用Stack叠加半透明容器和模糊的背景快照，但这种方式需要手动捕获背景，实现复杂且灵活性差。
• 使用第三方包（如glassmorphism），这类包已经封装好了毛玻璃+阴影的效果，直接调用即可。

不过推荐优先使用方案一，因为它基于原生API，性能和兼容性更好。

内容的提问来源于stack exchange，提问作者Tan Ur Reh