Flutter中如何实现带模糊效果的Overlay混合模式？

问题症结 #

1. 当前代码使用BoxShape.circle，但目标是椭圆形状，宽高相等的圆形无法匹配预期效果
2. BlurStyle.outer模式下spreadRadius参数不生效，导致阴影扩散效果无法实现
3. BackdropFilter与背景混合的方式不对，没有达到自然的融合模糊效果

修正后的代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: const Color(0xFF9465FB),
    appBar: AppBar(
      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      title: Text(widget.title),
    ),
    body: Stack(
      children: [
        // 左上角椭圆混合模糊效果
        Positioned(
          left: -120,
          top: -80,
          child: SizedBox(
            width: 300,
            height: 260, // 宽高不等实现椭圆
            child: ClipOval(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
                child: Container(
                  color: Colors.white.withOpacity(0.3), // 半透明白色实现背景混合
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.white.withOpacity(0.5),
                        blurRadius: 60,
                        spreadRadius: 20, // 移除BlurStyle.outer后该参数生效
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
        const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 这里添加你的页面内容
            ],
          ),
        ),
      ],
    ),
  );
}

核心调整说明 #

• 椭圆实现：通过SizedBox设置不等的宽高，再用ClipOval裁剪出椭圆形状
• 阴影扩散：移除BlurStyle.outer，改用默认的阴影模式，spreadRadius即可正常生效
• 背景混合：使用半透明白色容器配合BackdropFilter，让模糊效果与紫色背景自然融合，同时增大模糊参数sigmaX/Y提升视觉效果
• 位置适配：调整left和top的负值，让椭圆更好地贴合左上角区域

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