feat: ✨ Added Multi Showcase functionality and improvements

Author: Sahil-Simform

CHANGELOG.md

@@ -11,6 +11,11 @@
   Improved Tooltip widget
 - Feature [#54](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/54) - Added
   Feasibility to position tooltip left and right to the target widget.
+- Feature [#113](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/113) - Added
+  multiple showcase feature
+- Improvement [#514](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/pull/514) -
+  Improved showcase widget and showcase with widget, Removed inherited widget, keys and setStates,
+  Added controller to manage showcase
 
 ## [4.0.1]
 - Fixed [#493](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/493) - ShowCase.withWidget not showing issue 

README.md

@@ -125,6 +125,11 @@ WidgetsBinding.instance.addPostFrameCallback((_) =>
 );
 ```
 
+## MultiShowcaseView
+To show multiple showcase at the same time provide same key to showcase.
+Note: auto scroll to showcase will not work in case of the multi-showcase and we will use property
+of first initialized showcase for common things like barrier tap and colors.
+
 ## Functions of `ShowCaseWidget.of(context)`:
 
 | Function Name                            | Description              |

lib/showcaseview.dart

@@ -26,7 +26,7 @@ export 'src/enum.dart';
 export 'src/models/action_button_icon.dart';
 export 'src/models/tooltip_action_button.dart';
 export 'src/models/tooltip_action_config.dart';
-export 'src/showcase.dart';
+export 'src/showcase/showcase.dart';
 export 'src/showcase_widget.dart';
 export 'src/tooltip_action_button_widget.dart';
 export 'src/widget/floating_action_widget.dart';

lib/src/enum.dart

@@ -94,7 +94,7 @@ enum TooltipDefaultActionType {
   void onTap(ShowCaseWidgetState showCaseState) {
     switch (this) {
       case TooltipDefaultActionType.next:
-        showCaseState.next();
+        showCaseState.next(true);
         break;
       case TooltipDefaultActionType.previous:
         showCaseState.previous();

lib/src/get_position.dart

@@ -26,7 +26,7 @@ import 'package:flutter/material.dart';
 
 class GetPosition {
   GetPosition({
-    required this.key,
+    required this.context,
     required this.screenWidth,
     required this.screenHeight,
     this.padding = EdgeInsets.zero,
@@ -35,19 +35,23 @@ class GetPosition {
     getRenderBox();
   }
 
-  final GlobalKey key;
+  final BuildContext context;
   final EdgeInsets padding;
   final double screenWidth;
   final double screenHeight;
   final RenderObject? rootRenderObject;
 
   late final RenderBox? _box;
   late final Offset? _boxOffset;
+  late final Offset? overlayOffset;
 
   RenderBox? get box => _box;
 
   void getRenderBox() {
-    var renderBox = key.currentContext?.findRenderObject() as RenderBox?;
+    var renderBox = context.findRenderObject() as RenderBox?;
+
+    overlayOffset =
+        (rootRenderObject?.parent as RenderBox?)?.localToGlobal(Offset.zero);
 
     if (renderBox == null) return;
 
@@ -72,7 +76,10 @@ class GetPosition {
     final topLeft = _box!.size.topLeft(_boxOffset!);
     final bottomRight = _box!.size.bottomRight(_boxOffset!);
     final leftDx = topLeft.dx - padding.left;
-    final leftDy = topLeft.dy - padding.top;
+    var leftDy = topLeft.dy - padding.top;
+    if (leftDy < 0) {
+      leftDy = 0;
+    }
     final rect = Rect.fromLTRB(
       leftDx.clamp(0, leftDx),
       leftDy.clamp(0, leftDy),
@@ -123,4 +130,15 @@ class GetPosition {
   double getWidth() => getRight() - getLeft();
 
   double getCenter() => (getLeft() + getRight()) * 0.5;
+
+  Offset topLeft() =>
+      _box?.size.topLeft(
+        _box!.localToGlobal(
+          Offset.zero,
+          ancestor: rootRenderObject,
+        ),
+      ) ??
+      Offset.zero;
+
+  Offset getOffSet() => _box?.size.center(topLeft()) ?? Offset.zero;
 }

lib/src/layout_overlays.dart

@@ -24,93 +24,7 @@ import 'package:flutter/material.dart';
 
 import 'showcase_widget.dart';
 
-typedef OverlayBuilderCallback = Widget Function(
-  BuildContext context,
-  Rect anchorBounds,
-  Offset anchor,
-);
-
-/// Displays an overlay Widget anchored directly above the center of this
-/// [AnchoredOverlay].
-///
-/// The overlay Widget is created by invoking the provided [overlayBuilder].
-///
-/// The [anchor] position is provided to the [overlayBuilder], but the builder
-/// does not have to respect it. In other words, the [overlayBuilder] can
-/// interpret the meaning of "anchor" however it wants - the overlay will not
-/// be forced to be centered about the [anchor].
-///
-/// The overlay built by this [AnchoredOverlay] can be conditionally shown
-/// and hidden by settings the [showOverlay] property to true or false.
-///
-/// The [overlayBuilder] is invoked every time this Widget is rebuilt.
-///
-class AnchoredOverlay extends StatelessWidget {
-  final bool showOverlay;
-  final OverlayBuilderCallback? overlayBuilder;
-  final Widget? child;
-  final RenderObject? rootRenderObject;
-
-  const AnchoredOverlay({
-    super.key,
-    this.showOverlay = false,
-    this.overlayBuilder,
-    this.child,
-    this.rootRenderObject,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return LayoutBuilder(
-      builder: (context, constraints) {
-        return OverlayBuilder(
-          showOverlay: showOverlay,
-          overlayBuilder: (overlayContext) {
-            // To calculate the "anchor" point we grab the render box of
-            // our parent Container and then we find the center of that box.
-            final box = context.findRenderObject() as RenderBox?;
-
-            /// Handle null RenderBox safely.
-            final topLeft = box?.size.topLeft(
-                  box.localToGlobal(
-                    Offset.zero,
-                    ancestor: rootRenderObject,
-                  ),
-                ) ??
-                Offset.zero;
-            final bottomRight = box?.size.bottomRight(
-                  box.localToGlobal(
-                    Offset.zero,
-                    ancestor: rootRenderObject,
-                  ),
-                ) ??
-                Offset.zero;
-
-            /// Provide a default anchorBounds if box is null.
-            final anchorBounds = (topLeft.dx.isNaN ||
-                    topLeft.dy.isNaN ||
-                    bottomRight.dx.isNaN ||
-                    bottomRight.dy.isNaN)
-                ? const Rect.fromLTRB(0.0, 0.0, 0.0, 0.0)
-                : Rect.fromLTRB(
-                    topLeft.dx,
-                    topLeft.dy,
-                    bottomRight.dx,
-                    bottomRight.dy,
-                  );
-
-            /// Calculate the anchor center or default to Offset.zero.
-            final anchorCenter = box?.size.center(topLeft) ?? Offset.zero;
-
-            /// Pass the anchor details to the overlay builder.
-            return overlayBuilder!(overlayContext, anchorBounds, anchorCenter);
-          },
-          child: child,
-        );
-      },
-    );
-  }
-}
+typedef OverlayUpdateCallback = void Function(VoidCallback updateOverlay);
 
 /// Displays an overlay Widget as constructed by the given [overlayBuilder].
 ///
@@ -128,9 +42,11 @@ class OverlayBuilder extends StatefulWidget {
   final bool showOverlay;
   final WidgetBuilder? overlayBuilder;
   final Widget? child;
+  final OverlayUpdateCallback updateOverlay;
 
   const OverlayBuilder({
     super.key,
+    required this.updateOverlay,
     this.showOverlay = false,
     this.overlayBuilder,
     this.child,
@@ -150,12 +66,20 @@ class _OverlayBuilderState extends State<OverlayBuilder> {
     if (widget.showOverlay) {
       WidgetsBinding.instance.addPostFrameCallback((_) => showOverlay());
     }
+    widget.updateOverlay.call(updateOverlay);
+  }
+
+  void updateOverlay() {
+    buildOverlay();
+    WidgetsBinding.instance.addPostFrameCallback((_) => syncWidgetAndOverlay());
   }
 
   @override
   void didUpdateWidget(OverlayBuilder oldWidget) {
     super.didUpdateWidget(oldWidget);
-    WidgetsBinding.instance.addPostFrameCallback((_) => syncWidgetAndOverlay());
+    if (oldWidget.showOverlay != widget.showOverlay && widget.showOverlay) {
+      WidgetsBinding.instance.addPostFrameCallback((_) => showOverlay());
+    }
   }
 
   @override
@@ -221,8 +145,6 @@ class _OverlayBuilderState extends State<OverlayBuilder> {
 
   @override
   Widget build(BuildContext context) {
-    buildOverlay();
-
     return widget.child!;
   }
 }

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;
 }