Flutter高斯模糊的实现及性能优化

写在前面

Flutter中的高斯模糊（毛玻璃）大家应该都不陌生，我们可以用它实现画中画，阅后即焚，付费看高清等功能，是常用的UI组件。目前我正在做的项目中使用的点是 阅后即焚 IM中发送图片的功能

先放一张图

实现页面

通常处理

Stack(
   children: [
      CachedNetworkImage(imageUrl: path, fit: BoxFit.cover, width: width, height: height),
      Container(
        alignment: Alignment.center,
        clipBehavior: Clip.hardEdge,
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.fit)),
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: Container(color: Colors.white.withAlpha(0)),
        ),
      ),
    ],
)
  

很简单 就实现了我们想要的效果，到这里就完了吗，也不是 我们滑动页面debug模式先会明显看到页面的卡顿，这是我们所不允许的，使用DevTools看滑动过程中的看绘制情况
2个图片的绘制情况

系统filter绘制情况

优化

上图我们发现滑动过程中绘制情况不容乐观 这也是出现卡顿的原因
那有没有别的方法呢，当然有,看具体代码

Widget _blur(double width, double height) {
    loadNetImage(msg.image?.remotePath ?? '');
    return Obx(
      () => image.value != null
          ? CustomPaint(
              size: Size(width, height), painter: GlassPainter(image.value!, Size(image.value!.width.toDouble(), image.value!.height.toDouble())))
          : Container(),
    );
    return Container(
      alignment: Alignment.center,
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.fit)),
      child: BackdropFilter(
        filter: ui.ImageFilter.blur(sigmaX: 10, sigmaY: 10),
        child: Container(color: Colors.white.withAlpha(0)),
      ),
    );
  }

// 这里是加载的网络图片 同样可以换为本地图片或是加载file文件
  Future loadNetImage(String path) async {
    final data = await NetworkAssetBundle(Uri.parse(path)).load(path);
    final bytes = data.buffer.asUint8List();
    final imageD = await decodeImageFromList(bytes);
    image.value = imageD;
  }

class GlassPainter extends CustomPainter {
  final ui.Image image;
  final Size imageSize;
  final Paint _paint = Paint()
    ..color = Colors.white.withOpacity(0.8)
    ..style = PaintingStyle.fill
    ..imageFilter = ui.ImageFilter.blur(sigmaX: 10, sigmaY: 10, tileMode: TileMode.decal);

  GlassPainter(this.image, this.imageSize);

  @override
  void paint(Canvas canvas, Size size) {
    final Rect rect = Offset.zero & size;
    canvas.drawImageRect(image, Rect.fromLTWH(0, 0, imageSize.width, imageSize.height), rect, _paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

加载本地、file、相册图片

// 本地资源图片
Future loadIamge(String path) async {
  // 加载资源文件
  final data = await rootBundle.load(path);
  // 把资源文件转换成Uint8List类型
  final bytes = data.buffer.asUint8List();
  // 解析Uint8List类型的数据图片
  final image = await decodeImageFromList(bytes);
  this.image = image;
  setState(() {});
}

// 可绘制对象
Future loadLocalImage(String path) async {
  // 通过字节的方式读取本地文件
  final bytes = await File(path).readAsBytes();
  // 解析图片资源
  final image = await decodeImageFromList(bytes);
  this.image = image;
  setState(() {});
}

看代码 我们发现 我们不使用系统提供给我们的封装好的组件 我们选择了 自己去绘制图片同时设置画笔的高斯模糊效果，同样是两个图片 看滑动的性能

优化后

优化后 滑动明显好了很多，这只是两个图片 若是列表存在更多图片的话 这种优化会更明显

写在最后

性能有一个不小的提升 但是有个小问题 图片没有做缓存 这里还需要自己对图片进行缓存处理 防止多次下载同一张图片
据说Flutter版本3.22 对 ImageFillter性能做了优化，目前我还没有测试
有测试过的小伙伴 或是有更优化方法 欢迎交流