feat: ✨ Multiple showcase at the same time (#113)

CHANGELOG.md

@@ -7,6 +7,9 @@
   package.
 - Fixed [#506](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/506) - Timer
   was not canceling when tapped on `TooltipActionButton` which may cause issue when `autoPlay` is ON.
+- Feature [#113](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/113) -
+  Multiple showcase at the same time. Added a parameter `linkedShowcaseKeys` in showcase which will
+  take list of keys to start those showcase at the same time
 
 ## [4.0.1]
 - Fixed [#493](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/493) - ShowCase.withWidget not showing issue 

README.md

@@ -215,6 +215,8 @@ WidgetsBinding.instance.addPostFrameCallback((_) =>
 | tooltipActionConfig          | TooltipActionConfig?       |                                                  | Give configurations (alignment, position, etc...) to the tooltip actionbar                         | ✅          | ✅                |
 | enableAutoScroll             | bool?                      | ShowCaseWidget.enableAutoScroll                  | This is used to override the `ShowCaseWidget.enableAutoScroll` behaviour                           | ✅          | ✅                |
 | floatingActionWidget         | FloatingActionWidget       |                                                  | Provided a floating static action widget to show at any place on the screen                        | ✅          | ✅                |
+| linkedShowcaseKeys           | List<GlobalKey>            | []                                               | This is used to show multiple showcase at the same time with help of other `Showcase` keys         | ✅          | ✅                |
+
 
 ## Properties of `TooltipActionButton` and `TooltipActionButton.custom`:
 

example/lib/main.dart

@@ -285,6 +285,9 @@ class _MailPageState extends State<MailPage> {
                     Showcase(
                       targetPadding: const EdgeInsets.all(5),
                       key: _two,
+                      linkedShowcaseKeys: [
+                        _lastShowcaseWidget,
+                      ],
                       title: 'Profile',
                       description:
                           "Tap to see profile which contains user's name, profile picture, mobile number and country",

lib/src/extensions.dart

@@ -0,0 +1,15 @@
+import 'package:flutter/widgets.dart';
+
+extension GlobalKeyExtension on GlobalKey {
+  Rect? get globalPaintBounds {
+    final renderObject = currentContext?.findRenderObject();
+    final matrix = renderObject?.getTransformTo(null);
+
+    if (matrix != null && renderObject?.paintBounds != null) {
+      final rect = MatrixUtils.transformRect(matrix, renderObject!.paintBounds);
+      return rect;
+    } else {
+      return null;
+    }
+  }
+}

lib/src/models/linked_showcase_data.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/widgets.dart';
+
+/// This model is used to move linked showcase overlay data to parent
+/// showcase to crop linked showcase rect
+class LinkedShowcaseDataModel {
+  final Rect rect;
+  final EdgeInsets overlayPadding;
+  final BorderRadius? radius;
+  final bool isCircle;
+
+  const LinkedShowcaseDataModel({
+    required this.rect,
+    required this.radius,
+    required this.overlayPadding,
+    required this.isCircle,
+  });
+}

lib/src/shape_clipper.dart

@@ -24,17 +24,21 @@ import 'dart:ui' as ui;
 
 import 'package:flutter/material.dart';
 
+import 'models/linked_showcase_data.dart';
+
 class RRectClipper extends CustomClipper<ui.Path> {
   final bool isCircle;
   final BorderRadius? radius;
   final EdgeInsets overlayPadding;
   final Rect area;
+  final List<LinkedShowcaseDataModel> linkedObjectData;
 
   RRectClipper({
     this.isCircle = false,
     this.radius,
     this.overlayPadding = EdgeInsets.zero,
     this.area = Rect.zero,
+    this.linkedObjectData = const <LinkedShowcaseDataModel>[],
   });
 
   @override
@@ -49,7 +53,7 @@ class RRectClipper extends CustomClipper<ui.Path> {
       area.bottom + overlayPadding.bottom,
     );
 
-    return Path()
+    var mainObjectPath = Path()
       ..fillType = ui.PathFillType.evenOdd
       ..addRect(Offset.zero & size)
       ..addRRect(
@@ -61,12 +65,45 @@ class RRectClipper extends CustomClipper<ui.Path> {
           bottomRight: (radius?.bottomRight ?? customRadius),
         ),
       );
+
+    for (final widgetRect in linkedObjectData) {
+      final customRadius = widgetRect.isCircle
+          ? Radius.circular(widgetRect.rect.height)
+          : const Radius.circular(3.0);
+
+      final rect = Rect.fromLTRB(
+        widgetRect.rect.left - widgetRect.overlayPadding.left,
+        widgetRect.rect.top - widgetRect.overlayPadding.top,
+        widgetRect.rect.right + widgetRect.overlayPadding.right,
+        widgetRect.rect.bottom + widgetRect.overlayPadding.bottom,
+      );
+
+      /// We have use this approach so that overlapping cutout will merge with
+      /// each other
+      mainObjectPath = Path.combine(
+        PathOperation.difference,
+        mainObjectPath,
+        Path()
+          ..addRRect(
+            RRect.fromRectAndCorners(
+              rect,
+              topLeft: (widgetRect.radius?.topLeft ?? customRadius),
+              topRight: (widgetRect.radius?.topRight ?? customRadius),
+              bottomLeft: (widgetRect.radius?.bottomLeft ?? customRadius),
+              bottomRight: (widgetRect.radius?.bottomRight ?? customRadius),
+            ),
+          ),
+      );
+    }
+
+    return mainObjectPath;
   }
 
   @override
   bool shouldReclip(covariant RRectClipper oldClipper) =>
       isCircle != oldClipper.isCircle ||
       radius != oldClipper.radius ||
       overlayPadding != oldClipper.overlayPadding ||
-      area != oldClipper.area;
+      area != oldClipper.area ||
+      linkedObjectData != oldClipper.linkedObjectData;
 }