Flutter 中带有背景滤镜的框阴影

Question

我正在尝试在flutter中实现这个设计：

实际设计

到目前为止我能够实现这一点：

黑暗

光

我不知道如何使用背景滤镜应用阴影。阴影在我不想要的小部件内可见

用途：

    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,
              )),
        ),
      ),
    );
  }
    }

小部件：

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,
        ),
      ),
    );
  }
}

有什么办法可以实现这一点吗？或者除了使用背景滤镜或实现我的设计之外的任何其他方式？

Answer 1

您可以在 BoxShadow 上使用

blurStyle: BlurStyle.outer

使其仅在容器外部出血。例如：

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) {
    return Container(
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(borderRadius),
        boxShadow: [
          BoxShadow(
            blurStyle: BlurStyle.outer,
            color: Colors.black.withOpacity(0.3),
            spreadRadius: 0,
            blurRadius: 8,
          ),
        ],
      ),
      child: BackdropFilter(
        filter: ImageFilter.blur(
          sigmaX: 10.0,
          sigmaY: 10.0,
        ),
        child: child,
      ),
    );
  }
}