adicionando efeito de blur

Author: rafaelbarbsoatec

example/lib/main.dart

@@ -229,7 +229,7 @@ class MyHomePageState extends State<MyHomePage> {
       colorShadow: Colors.red,
       textSkip: "SKIP",
       paddingFocus: 10,
-      opacityShadow: 0.8,
+      opacityShadow: 0.5,
       onFinish: () {
         print("finish");
       },

lib/src/widgets/animated_focus_light.dart

@@ -1,4 +1,6 @@
 import 'dart:async';
+import 'dart:math';
+import 'dart:ui';
 
 import 'package:flutter/material.dart';
 import 'package:tutorial_coach_mark/src/paint/light_paint.dart';
@@ -365,11 +367,31 @@ class AnimatedPulseFocusLightState extends AnimatedFocusLightState {
               }
               return Stack(
                 children: <Widget>[
-                  SizedBox(
-                    width: double.maxFinite,
-                    height: double.maxFinite,
-                    child: CustomPaint(
-                      painter: _getPainter(_targetFocus),
+                  ClipPath(
+                    clipper: _targetFocus.shape == ShapeLightFocus.RRect
+                        ? MyRectClipper(
+                            progress: _progressAnimated,
+                            offset: _getPaddingFocus(),
+                            target: _targetPosition ??
+                                TargetPosition(Size.zero, Offset.zero),
+                            radius: _targetFocus.radius ?? 0,
+                            borderSide: _targetFocus.borderSide,
+                          )
+                        : MyCircleClipper(
+                            _progressAnimated,
+                            _positioned,
+                            _sizeCircle,
+                            _targetFocus.borderSide,
+                          ),
+                    child: BackdropFilter(
+                      filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
+                      child: SizedBox(
+                        width: double.maxFinite,
+                        height: double.maxFinite,
+                        child: CustomPaint(
+                          painter: _getPainter(_targetFocus),
+                        ),
+                      ),
                     ),
                   ),
                   Positioned(
@@ -482,3 +504,101 @@ class AnimatedPulseFocusLightState extends AnimatedFocusLightState {
     );
   }
 }
+
+class MyCircleClipper extends CustomClipper<Path> {
+  final double progress;
+  final Offset positioned;
+  final double sizeCircle;
+  final BorderSide? borderSide;
+
+  MyCircleClipper(
+    this.progress,
+    this.positioned,
+    this.sizeCircle,
+    this.borderSide,
+  );
+
+  @override
+  Path getClip(Size size) {
+    if (positioned == Offset.zero) return Path();
+    var maxSize = max(size.width, size.height);
+
+    double radius = maxSize * (1 - progress) + sizeCircle;
+    final circleHole = Path()
+      ..moveTo(0, 0)
+      ..lineTo(0, positioned.dy)
+      ..arcTo(
+        Rect.fromCircle(center: positioned, radius: radius),
+        pi,
+        pi,
+        false,
+      )
+      ..arcTo(
+        Rect.fromCircle(center: positioned, radius: radius),
+        0,
+        pi,
+        false,
+      )
+      ..lineTo(0, positioned.dy)
+      ..lineTo(0, size.height)
+      ..lineTo(size.width, size.height)
+      ..lineTo(size.width, 0)
+      ..close();
+    return circleHole;
+  }
+
+  @override
+  bool shouldReclip(covariant MyCircleClipper oldClipper) {
+    return progress != oldClipper.progress;
+  }
+}
+
+class MyRectClipper extends CustomClipper<Path> {
+  final double progress;
+  final TargetPosition target;
+  final double offset;
+  final double radius;
+  final BorderSide? borderSide;
+
+  MyRectClipper({
+    required this.progress,
+    required this.target,
+    required this.offset,
+    required this.radius,
+    this.borderSide,
+  });
+
+  @override
+  Path getClip(Size size) {
+    if (target.offset == Offset.zero) return Path();
+
+    var maxSize = max(size.width, size.height) +
+        max(target.size.width, target.size.height) +
+        target.getBiggerSpaceBorder(size);
+
+    double x = -maxSize / 2 * (1 - progress) + target.offset.dx - offset / 2;
+
+    double y = -maxSize / 2 * (1 - progress) + target.offset.dy - offset / 2;
+
+    double w = maxSize * (1 - progress) + target.size.width + offset;
+
+    double h = maxSize * (1 - progress) + target.size.height + offset;
+    return Path()
+      ..moveTo(0, 0)
+      ..lineTo(0, y)
+      ..lineTo(x + w, y)
+      ..lineTo(x + w, y + h)
+      ..lineTo(x, y + h)
+      ..lineTo(x, y)
+      ..lineTo(0, y)
+      ..lineTo(0, size.height)
+      ..lineTo(size.width, size.height)
+      ..lineTo(size.width, 0)
+      ..close();
+  }
+
+  @override
+  bool shouldReclip(covariant MyRectClipper oldClipper) {
+    return progress != oldClipper.progress;
+  }
+}