feat: ✨ Multiple showcase at the same time and improvement (#514)

* chore: 💥 Update min dart sdk to 2.19.6

* fix: 🩹 Fixed the page transition issue

* fix: 🩹 Shifted everything to showcase controller

Author: Sahil-Simform

CHANGELOG.md

@@ -11,6 +11,13 @@
   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
+- CHORE [#514](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/pull/514) -
+  Bumped dart minimum sdk to 2.19.6
 
 ## [4.0.1]
 - Fixed [#493](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/493) - ShowCase.withWidget not showing issue 

README.md

@@ -110,21 +110,60 @@ Showcase.withWidget(
 ),
 ```
 
-5. Starting the `ShowCase`
+5. Starting the `ShowCase`:
 ```dart
 someEvent(){
     ShowCaseWidget.of(context).startShowCase([_one, _two, _three]);
 }
 ```
 
-If you want to start the `ShowCaseView` as soon as your UI built up then use below code.
+If you want to start the `ShowCaseView` as soon as your UI built up then use below code:
 
 ```dart
 WidgetsBinding.instance.addPostFrameCallback((_) =>
   ShowCaseWidget.of(context).startShowCase([_one, _two, _three])
 );
 ```
 
+If you have some animation or transition in your UI and you want to start the `ShowCaseView` after
+that then use below code:
+
+```dart
+WidgetsBinding.instance.addPostFrameCallback((_) =>
+  ShowCaseWidget.of(context).startShowCase([_one, _two, _three], delay: "Animation Duration")
+);
+```
+
+## 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.
+
+```dart
+GlobalKey _one = GlobalKey();
+...
+
+Showcase(
+  key: _one,
+  title: 'Showcase one',
+  description: 'Click here to see menu options',
+  child: Icon(
+  Icons.menu,
+  color: Colors.black45,
+  ),
+),
+
+Showcase(
+  key: _one,
+  title: 'Showcase two',
+  description: 'Click here to see menu options',
+  child: Icon(
+  Icons.menu,
+  color: Colors.black45,
+  ),
+),
+```
+
 ## Functions of `ShowCaseWidget.of(context)`:
 
 | Function Name                            | Description              |
@@ -257,7 +296,7 @@ So, If you want to make a scroll view that contains less number of children widg
 
 If using SingleChildScrollView is not an option, then you can assign a ScrollController to that scrollview and manually scroll to the position where showcase widget gets rendered. You can add that code in onStart method of `ShowCaseWidget`.
 
-Example,
+Example:
 
 ```dart
 // This controller will be assigned to respected sctollview.

example/lib/main.dart

@@ -468,8 +468,12 @@ class _MailPageState extends State<MailPage> {
               ),
             ).then((_) {
               setState(() {
-                ShowCaseWidget.of(context)
-                    .startShowCase([_four, _lastShowcaseWidget]);
+                ShowCaseWidget.of(context).startShowCase(
+                  [_four, _lastShowcaseWidget],
+                  delay: const Duration(
+                    milliseconds: 200,
+                  ),
+                );
               });
             });
           },

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/constants.dart

@@ -1,3 +1,7 @@
+import 'package:flutter/material.dart';
+
+import 'widget/showcase_circular_progress_indicator.dart';
+
 class Constants {
   Constants._();
 
@@ -25,4 +29,16 @@ class Constants {
   /// i.e if it is bottom position then centerBottom + [extraAlignmentOffset]
   /// in bottom
   static const double extraAlignmentOffset = 5;
+
+  static const Radius defaultTargetRadius = Radius.circular(3.0);
+
+  static const ShapeBorder defaultTargetShapeBorder = RoundedRectangleBorder(
+    borderRadius: BorderRadius.all(Radius.circular(8)),
+  );
+
+  static const double cupertinoActivityIndicatorRadius = 12.0;
+  static const Widget defaultProgressIndicator =
+      ShowcaseCircularProgressIndicator();
+
+  static const Duration defaultAnimationDuration = Duration(milliseconds: 2000);
 }

lib/src/enum.dart

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

lib/src/get_position.dart

@@ -26,40 +26,34 @@ import 'package:flutter/material.dart';
 
 class GetPosition {
   GetPosition({
-    required this.key,
+    required this.renderBox,
     required this.screenWidth,
     required this.screenHeight,
     this.padding = EdgeInsets.zero,
     this.rootRenderObject,
   }) {
-    getRenderBox();
+    _getRenderBoxOffset();
   }
 
-  final GlobalKey key;
+  final RenderBox? renderBox;
   final EdgeInsets padding;
   final double screenWidth;
   final double screenHeight;
   final RenderObject? rootRenderObject;
 
-  late final RenderBox? _box;
-  late final Offset? _boxOffset;
-
-  RenderBox? get box => _box;
-
-  void getRenderBox() {
-    var renderBox = key.currentContext?.findRenderObject() as RenderBox?;
+  Offset? _boxOffset;
 
+  void _getRenderBoxOffset() {
     if (renderBox == null) return;
 
-    _box = renderBox;
-    _boxOffset = _box?.localToGlobal(
+    _boxOffset = renderBox?.localToGlobal(
       Offset.zero,
       ancestor: rootRenderObject,
     );
   }
 
   bool _checkBoxOrOffsetIsNull({bool checkDy = false, bool checkDx = false}) {
-    return _box == null ||
+    return renderBox == null ||
         _boxOffset == null ||
         (checkDx && (_boxOffset?.dx.isNaN ?? true)) ||
         (checkDy && (_boxOffset?.dy.isNaN ?? true));
@@ -69,13 +63,13 @@ class GetPosition {
     if (_checkBoxOrOffsetIsNull(checkDy: true, checkDx: true)) {
       return Rect.zero;
     }
-    final topLeft = _box!.size.topLeft(_boxOffset!);
-    final bottomRight = _box!.size.bottomRight(_boxOffset!);
+    final topLeft = renderBox!.size.topLeft(_boxOffset!);
+    final bottomRight = renderBox!.size.bottomRight(_boxOffset!);
     final leftDx = topLeft.dx - padding.left;
     final leftDy = topLeft.dy - padding.top;
     final rect = Rect.fromLTRB(
-      leftDx.clamp(0, leftDx),
-      leftDy.clamp(0, leftDy),
+      leftDx.clamp(0, double.maxFinite),
+      leftDy.clamp(0, double.maxFinite),
       min(bottomRight.dx + padding.right, screenWidth),
       min(bottomRight.dy + padding.bottom, screenHeight),
     );
@@ -87,7 +81,7 @@ class GetPosition {
     if (_checkBoxOrOffsetIsNull(checkDy: true)) {
       return padding.bottom;
     }
-    final bottomRight = _box!.size.bottomRight(_boxOffset!);
+    final bottomRight = renderBox!.size.bottomRight(_boxOffset!);
     return bottomRight.dy + padding.bottom;
   }
 
@@ -96,7 +90,7 @@ class GetPosition {
     if (_checkBoxOrOffsetIsNull(checkDy: true)) {
       return -padding.top;
     }
-    final topLeft = _box!.size.topLeft(_boxOffset!);
+    final topLeft = renderBox!.size.topLeft(_boxOffset!);
     return topLeft.dy - padding.top;
   }
 
@@ -105,7 +99,7 @@ class GetPosition {
     if (_checkBoxOrOffsetIsNull(checkDx: true)) {
       return -padding.left;
     }
-    final topLeft = _box!.size.topLeft(_boxOffset!);
+    final topLeft = renderBox!.size.topLeft(_boxOffset!);
     return topLeft.dx - padding.left;
   }
 
@@ -114,7 +108,7 @@ class GetPosition {
     if (_checkBoxOrOffsetIsNull(checkDx: true)) {
       return padding.right;
     }
-    final bottomRight = _box!.size.bottomRight(_boxOffset!);
+    final bottomRight = renderBox!.size.bottomRight(_boxOffset!);
     return bottomRight.dx + padding.right;
   }
 
@@ -123,4 +117,18 @@ class GetPosition {
   double getWidth() => getRight() - getLeft();
 
   double getCenter() => (getLeft() + getRight()) * 0.5;
+
+  Offset topLeft() {
+    final box = renderBox;
+    if (box == null) return Offset.zero;
+
+    return box.size.topLeft(
+      box.localToGlobal(
+        Offset.zero,
+        ancestor: rootRenderObject,
+      ),
+    );
+  }
+
+  Offset getOffset() => renderBox?.size.center(topLeft()) ?? Offset.zero;
 }

lib/src/models/linked_showcase_data.dart

@@ -0,0 +1,35 @@
+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 {
+  const LinkedShowcaseDataModel({
+    required this.rect,
+    required this.radius,
+    required this.overlayPadding,
+    required this.isCircle,
+  });
+
+  final Rect rect;
+  final EdgeInsets overlayPadding;
+  final BorderRadius? radius;
+  final bool isCircle;
+
+  @override
+  bool operator ==(Object other) =>
+      identical(this, other) ||
+      other is LinkedShowcaseDataModel &&
+          runtimeType == other.runtimeType &&
+          rect == other.rect &&
+          radius == other.radius &&
+          overlayPadding == other.overlayPadding &&
+          isCircle == other.isCircle;
+
+  @override
+  int get hashCode => Object.hash(
+        rect,
+        radius,
+        overlayPadding,
+        isCircle,
+      );
+}