Flutter 3.29.0 修改 ImageFilter.blur 的默认模糊效果在图像边缘的填充方式

2025年2月12日:3.29.0发布 。

在Flutter 3.29.0 版本中,ImageFilter.blur的默认平铺模式现在由后端自动选择。以前使用TileMode.clamp,除非指定了不同的图块模式。现在,默认值为null,并指定自动选择,除非指定了特定的磁贴模式。

在这里插入图片描述
Flutter 提供了以下四种 TileMode 模式:

SizedBox(
      width: 300,
      height: 200,
      child: Stack(
        children: [
          Positioned.fill(
            child: Image.asset('assets/images/tian.png', fit: BoxFit.fill),
          ),
          ImageFiltered(
            imageFilter: ImageFilter.blur(
              sigmaX: 5,
              sigmaY: 5,
              tileMode: TileMode.decal,
            ),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.5),
              ),
              child: Image.asset('assets/images/test.png'),
            ),
          ),
        ],
      ),
    ),

TileMode.clamp

​边缘颜色延伸:将渐变边缘的颜色无限延伸到剩余区域。
例如:如果渐变的最后一个颜色是红色,超出渐变范围的区域会全部填充红色。
​效果类似 CSS 的 clamp 模式。

在这里插入图片描述

TileMode.repeated

​重复平铺:将渐变或图像从头到尾无限重复,不进行任何镜像处理。
例如:渐变会像贴瓷砖一样重复排列。
​适合创建无缝重复的图案。
在这里插入图片描述

TileMode.mirror

​镜像重复:每次重复时,渐变或图像会反向排列,形成镜像效果。
例如:A-B-C 会变成 A-B-C-B-A-B-C…,避免重复时的生硬接缝。
​适合需要平滑过渡的场景。
在这里插入图片描述

TileMode.decal​ (仅在 Flutter 3.0+ 中支持)

​仅填充原始区域:超出原始范围的部分会被透明填充(如果图像有透明度),否则显示未定义行为。
​适用于需要严格限制绘制范围的情况。

BackdropFilter(
  filter: ImageFilter.blur(
    sigmaX: 10,
    sigmaY: 10,
    tileMode: TileMode.decal, // 边缘透明,避免颜色延伸
  ),
  child: Container(color: Colors.black.withOpacity(0.3)),
)

在这里插入图片描述

通常需要将 BackdropFilter 包裹在 ClipRect 中,限制模糊范围,避免全屏模糊:

ClipRect(
  child: BackdropFilter(...),
)