[Flutter]实现毛玻璃擦干净的效果

先上效果:

small_demo.gif

如何实现

毛玻璃效果

如果只是通过已有的widget实现这个效果, 并不麻烦, 下面的代码足够了

.....
          child:BackdropFilter(
              filter: ImageFilter.blur(
                sigmaX: widget.blurLevel,
                sigmaY: widget.blurLevel,
              ),
              child: const Text('  '),
            ),

随收拾清除毛玻璃效果

这个有点难度, 思路是自定义CustomPaint, 然后在paint函数中绘制手势Path, 再这个过程中, 通过反向选择Path, 绘制毛玻璃效果. 也就是手指touch绘制的地方都不绘制毛玻璃效果, 只有手指没有触摸过的地方才绘制, 这样就实现了这个效果.
这里只贴出主要的代码

先计算出所有手势触摸过的Path总和
    var unionDrawPath = Path();
    for (final path in paths) {
      canvas.drawPath(path, gesturePathPaint);
      unionDrawPath = Path.combine(PathOperation.union, unionDrawPath, path);
    }

然后是从整体Rect中提出这个unionDrawPath :

    final rect = Rect.fromLTWH(0, 0, size.width, size.height);
    final imagePath = Path.combine(
      PathOperation.difference,
      Path()..addRect(rect),
      unionDrawPath,
    );

最后就是绘制这个imagePath , 也就是要显示毛玻璃效果的区域

canvas.drawImageRect(image!, ....);

代码传送门:https://github.com/shaopx/wow_photos_flutter/blob/master/packages/flutter_widgets/lib/blurry_glass_pane.dart