How to make a unblurred hole 100x100 inside BackdropFilter.blur in Flutter

Question

I need to make a unblurred hole 100x100 inside BackdropFilter.blur in Flutter

Answer 1

You can use CustomClipper.

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.fillType = PathFillType.evenOdd;
    path.addRect(Rect.fromLTWH(0, 0, size.width, size.height));

    path.addOval(Rect.fromCenter(
        center: Offset(size.width / 2, size.height / 2),
        width: 100,
        height: 100));

    return path;
  }

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

And use

ClipPath(
  clipper: MyClipper(),
  child: BackdropFilter(
    filter: ImageFilter.blur(
      //import dart:ui
      sigmaX: 5.0,
      sigmaY: 5.0,
    ),
    child: const SizedBox(
      width: 200.0,
      height: 200.0,
    ),
  ),
),

Result