Flutter实现图片背景模糊、前景保留效果的方法

不用依赖第三方包，用Flutter原生组件就能实现你要的效果，核心思路是通过Stack分层布局，底层做模糊处理，上层保留清晰的前景区域，具体实现如下：

核心实现步骤 #

• 用Stack将模糊背景和清晰前景重叠放置
• 借助BackdropFilter配合ImageFilter.blur对背景图做模糊处理
• 通过ClipRRect（规则形状）或CustomClipper（不规则形状）裁剪出需要保留清晰的前景区域

代码示例（规则前景区域） #

如果你的前景是圆角矩形这类规则形状，直接用ClipRRect即可：

import 'dart:ui';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          // 底层：原始图片作为模糊背景的基底
          Image.asset(
            'assets/your_image.jpg', // 替换成你的图片路径
            fit: BoxFit.cover,
          ),
          // 模糊滤镜层
          BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12), // 调整sigma值控制模糊程度
            child: Container(
              color: Colors.black.withOpacity(0.2), // 可选：增加暗度，让模糊效果更突出
            ),
          ),
          // 上层：保留清晰的前景区域
          Center(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(24), // 圆角大小按需调整
              child: Image.asset(
                'assets/your_image.jpg', // 和底层同一张图片
                width: 260,
                height: 360,
                fit: BoxFit.cover,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

自定义不规则前景区域 #

如果需要像目标图那样的不规则清晰区域，用CustomClipper自定义裁剪路径：

class ForegroundClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 这里以中间椭圆为例，你可以根据需求调整成任意形状
    path.addOval(Rect.fromCenter(
      center: Offset(size.width / 2, size.height / 2),
      width: 290,
      height: 390,
    ));
    // 添加全屏矩形，通过evenOdd填充类型实现反向裁剪
    path.addRect(Rect.fromLTWH(0, 0, size.width, size.height));
    return path..fillType = PathFillType.evenOdd;
  }

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

然后在Stack上层替换成ClipPath：

ClipPath(
  clipper: ForegroundClipper(),
  child: Image.asset(
    'assets/your_image.jpg',
    fit: BoxFit.cover,
  ),
)

关于BlurryContainer失效的说明 #

BlurryContainer主要是给容器添加模糊背景，无法直接实现“图片局部模糊+局部清晰”的效果，所以原生的分层裁剪方案更适合你的需求。

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