flutter 高斯模糊闪烁问题

肥肥呀呀呀2025-08-30 18:40

1、运行flutter版本

bash 复制代码

Flutter 3.24.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 2663184aa7 (12 months ago) • 2024-09-11 16:27:48 -0500
Engine • revision 36335019a8
Tools • Dart 3.5.3 • DevTools 2.37.3

2、代码使用如下

Dart 复制代码

 Widget _buildBlurMask() {
    var imageFilter = ImageFilter.blur(sigmaX: 40, sigmaY: 40);
    var sizedBox = SizedBox(width: double.infinity, height: double.infinity);
    var backdropFilter = BackdropFilter(filter: imageFilter, child: sizedBox);
    return ClipRect(clipBehavior: Clip.antiAlias, child: backdropFilter);
  }

final blurMask = _buildBlurMask();

Positioned.fill(child: blurMask),

3、导师回答

使用 Flutter 3.29+ 的 `BackdropFilter.grouped`（远期考虑）

Flutter 3.29 引入了 BackdropGroup和 BackdropFilter.grouped，专门用于优化多个模糊效果的渲染性能。这需要你将 Flutter SDK 升级到 3.29.0 或更高版本

4、直接图片处理成高斯模糊的图片

flutter_blurhash | Flutter package

5、flutter使用 blurhash_ffi 库来处理

blurhash_ffi | Flutter package

flutter 高斯模糊闪烁问题

使用 Flutter 3.29+ 的 BackdropFilter.grouped（远期考虑）

使用 Flutter 3.29+ 的 `BackdropFilter.grouped`（远期考虑）