feat: ✨Added targetTooltipGap for space between target and tooltip (#520)

Author: Sahil-Simform

CHANGELOG.md

@@ -20,6 +20,21 @@
   Bumped dart minimum sdk to 2.19.6
 - Fixed [#515](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/515) - Added
   missing assertions for `Showcase.withWidget()`.
+- Feature [#518](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/pull/518) - created
+  a showcaseView and overlay manager classes to handle showcaseView widget functionality
+  independently.
+- Feature [#518](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/pull/518) -
+  Deprecated `ShowCaseWidget`
+  widget and added `ShowcaseView` class to handle showcase widget functionality independently
+  without context.
+- Format [#528](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/pull/528) - Formatted
+  project structure
+- Fixed [#526](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/526) - Fixed
+  screen edge assertions.
+- Feature [#521](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/521) - Added
+  `toolTipMargin` support for `Showcase.withWidget`
+- Feature [#520](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/520) - Added
+  `targetTooltipGap` to manage space between tooltip and target widget
 
 ## [4.0.1]
 - Fixed [#493](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/493) - ShowCase.withWidget not showing issue 

lib/src/showcase/showcase.dart

@@ -300,6 +300,11 @@ class Showcase extends StatefulWidget {
   /// for this showcase.
   final bool? enableAutoScroll;
 
+  /// Defines the space between target widget and tooltip.
+  ///
+  /// Defaults to 10.
+  final double targetTooltipGap;
+
   /// Highlights a specific widget on the screen with an informative tooltip.
   ///
   /// This widget helps you showcase specific parts of your UI by drawing an
@@ -326,6 +331,7 @@ class Showcase extends StatefulWidget {
   ///   - `tooltipPadding`: Padding around the content inside the tooltip.
   ///   - `onToolTipClick`: A callback function called when the user clicks the tooltip.
   ///   - `tooltipBorderRadius`: The border radius of the tooltip (defaults to 8dp).
+  ///   - `targetTooltipGap`: The gap between the target widget and the tooltip (defaults to 10dp).
   ///
   /// **Highlight:**
   ///   - `targetShapeBorder`: The border to draw around the showcased widget (defaults to a rounded rectangle).
@@ -419,10 +425,15 @@ class Showcase extends StatefulWidget {
     this.scrollAlignment = 0.5,
     this.enableAutoScroll,
     this.floatingActionWidget,
+    this.targetTooltipGap = 10,
   })  : height = null,
         width = null,
         container = null,
         showcaseKey = key,
+        assert(
+          targetTooltipGap >= 0,
+          'targetTooltipGap must be greater than 0',
+        ),
         assert(
           overlayOpacity >= 0.0 && overlayOpacity <= 1.0,
           'overlay opacity must be between 0 and 1.',
@@ -523,6 +534,7 @@ class Showcase extends StatefulWidget {
     this.scrollAlignment = 0.5,
     this.enableAutoScroll,
     this.toolTipMargin = 14,
+    this.targetTooltipGap = 10,
   })  : showArrow = false,
         onToolTipClick = null,
         scaleAnimationDuration = const Duration(milliseconds: 300),
@@ -546,6 +558,10 @@ class Showcase extends StatefulWidget {
         titleTextDirection = null,
         descriptionTextDirection = null,
         showcaseKey = key,
+        assert(
+          targetTooltipGap >= 0,
+          'targetTooltipGap must be greater than 0',
+        ),
         assert(
           overlayOpacity >= 0.0 && overlayOpacity <= 1.0,
           'overlay opacity must be between 0 and 1.',

lib/src/showcase/showcase_controller.dart

@@ -269,6 +269,7 @@ class ShowcaseController {
               tooltipActionConfig: _getTooltipActionConfig(),
               tooltipActions: _getTooltipActions(),
               targetPadding: config.targetPadding,
+              targetTooltipGap: config.targetTooltipGap,
               showcaseController: this,
             ),
             if (_getFloatingActionWidget != null) _getFloatingActionWidget!,

lib/src/tooltip/animated_tooltip_layout.dart

@@ -45,6 +45,7 @@ class _AnimatedTooltipMultiLayout extends MultiChildRenderObjectWidget {
     required this.screenEdgePadding,
     required this.targetPadding,
     required this.showcaseOffset,
+    required this.targetTooltipGap,
   });
 
   final AnimationController scaleController;
@@ -63,6 +64,7 @@ class _AnimatedTooltipMultiLayout extends MultiChildRenderObjectWidget {
   final double screenEdgePadding;
   final EdgeInsets targetPadding;
   final Offset showcaseOffset;
+  final double targetTooltipGap;
 
   @override
   RenderObject createRenderObject(BuildContext context) {
@@ -83,6 +85,7 @@ class _AnimatedTooltipMultiLayout extends MultiChildRenderObjectWidget {
       screenEdgePadding: screenEdgePadding,
       targetPadding: targetPadding,
       showcaseOffset: showcaseOffset,
+      targetTooltipGap: targetTooltipGap,
     );
   }
 
@@ -106,6 +109,7 @@ class _AnimatedTooltipMultiLayout extends MultiChildRenderObjectWidget {
       ..toolTipSlideEndDistance = toolTipSlideEndDistance
       ..gapBetweenContentAndAction = gapBetweenContentAndAction
       ..targetPadding = targetPadding
-      ..showcaseOffset = showcaseOffset;
+      ..showcaseOffset = showcaseOffset
+      ..targetTooltipGap = targetTooltipGap;
   }
 }

lib/src/tooltip/render_animation_delegate.dart

@@ -51,6 +51,7 @@ class _RenderAnimationDelegate extends _RenderPositionDelegate {
     required super.screenEdgePadding,
     required super.targetPadding,
     required super.showcaseOffset,
+    required super.targetTooltipGap,
   })  : _scaleController = scaleController,
         _moveController = moveController,
         _scaleAnimation = scaleAnimation,

lib/src/tooltip/render_position_delegate.dart

@@ -52,6 +52,7 @@ class _RenderPositionDelegate extends RenderBox
     required this.screenEdgePadding,
     required this.targetPadding,
     required this.showcaseOffset,
+    required this.targetTooltipGap,
   });
 
   // Core positioning parameters
@@ -65,6 +66,7 @@ class _RenderPositionDelegate extends RenderBox
   double gapBetweenContentAndAction;
   double screenEdgePadding;
   EdgeInsets targetPadding;
+  double targetTooltipGap;
 
   /// This is used when there is some space around showcaseview as this widget
   /// implementation works in global coordinate system so because of that we
@@ -325,7 +327,7 @@ class _RenderPositionDelegate extends RenderBox
         ? targetPosition.dx -
             showcaseOffset.dx -
             screenEdgePadding -
-            Constants.tooltipOffset -
+            targetTooltipGap -
             targetPadding.left -
             _getArrowPadding
         : screenSize.width - screenEdgePadding - _xOffset - targetPadding.right;
@@ -489,9 +491,7 @@ class _RenderPositionDelegate extends RenderBox
 
   /// Calculate extra vertical component height for arrow and padding
   double _calculateExtraVerticalHeight() {
-    return tooltipPosition.isVertical
-        ? Constants.tooltipOffset + _getArrowPadding
-        : 0;
+    return tooltipPosition.isVertical ? targetTooltipGap + _getArrowPadding : 0;
   }
 
   /// Handle tooltip exceeding top or bottom screen edge
@@ -639,7 +639,7 @@ class _RenderPositionDelegate extends RenderBox
         tooltipPosition = TooltipPosition.top;
         _yOffset = targetPosition.dy -
             _toolTipBoxSize.height -
-            Constants.tooltipOffset -
+            targetTooltipGap -
             _getArrowPadding;
         break;
 
@@ -648,7 +648,7 @@ class _RenderPositionDelegate extends RenderBox
         tooltipPosition = TooltipPosition.bottom;
         _yOffset = targetPosition.dy +
             targetSize.height +
-            Constants.tooltipOffset +
+            targetTooltipGap +
             _getArrowPadding;
         break;
 
@@ -657,7 +657,7 @@ class _RenderPositionDelegate extends RenderBox
         tooltipPosition = TooltipPosition.right;
         _xOffset = targetPosition.dx +
             targetSize.width +
-            Constants.tooltipOffset +
+            targetTooltipGap +
             _getArrowPadding;
         break;
 
@@ -666,7 +666,7 @@ class _RenderPositionDelegate extends RenderBox
         tooltipPosition = TooltipPosition.left;
         _xOffset = targetPosition.dx -
             _toolTipBoxSize.width -
-            Constants.tooltipOffset -
+            targetTooltipGap -
             _getArrowPadding;
         break;
     }
@@ -856,8 +856,7 @@ class _RenderPositionDelegate extends RenderBox
         // Center horizontally below target
         xOffset = targetPosition.dx + centerDxForTooltip;
         // Position below target with appropriate offset
-        yOffset =
-            targetPosition.dy + targetSize.height + Constants.tooltipOffset;
+        yOffset = targetPosition.dy + targetSize.height + targetTooltipGap;
         // Add additional padding if arrow is shown
 
         yOffset += _getArrowPadding;
@@ -870,15 +869,15 @@ class _RenderPositionDelegate extends RenderBox
         // Position above target with appropriate offset
         yOffset = targetPosition.dy -
             toolTipBoxSize.height -
-            Constants.tooltipOffset -
+            targetTooltipGap -
             _getArrowPadding;
         break;
 
       case TooltipPosition.left:
         // Position to the left of target with appropriate offset
         xOffset = targetPosition.dx -
             toolTipBoxSize.width -
-            Constants.tooltipOffset -
+            targetTooltipGap -
             _getArrowPadding;
 
         // Center vertically beside target
@@ -889,7 +888,7 @@ class _RenderPositionDelegate extends RenderBox
         // Position to the right of target with appropriate offset
         xOffset = targetPosition.dx +
             targetSize.width +
-            Constants.tooltipOffset +
+            targetTooltipGap +
             _getArrowPadding;
 
         // Center vertically beside target
@@ -920,29 +919,29 @@ class _RenderPositionDelegate extends RenderBox
     final isBottom = targetPosition.dy +
             targetSize.height +
             totalHeight +
-            Constants.tooltipOffset +
+            targetTooltipGap +
             arrowPadding -
             showcaseOffset.dy <=
         screenSize.height - screenEdgePadding;
 
     final isTop = targetPosition.dy -
             totalHeight -
-            Constants.tooltipOffset -
+            targetTooltipGap -
             arrowPadding -
             showcaseOffset.dy >=
         screenEdgePadding;
 
     final isLeft = targetPosition.dx -
             tooltipSize.width -
-            Constants.tooltipOffset -
+            targetTooltipGap -
             arrowPadding -
             showcaseOffset.dx >=
         screenEdgePadding;
 
     final isRight = targetPosition.dx +
             targetSize.width +
             tooltipSize.width +
-            Constants.tooltipOffset +
+            targetTooltipGap +
             arrowPadding -
             showcaseOffset.dx <=
         screenSize.width - screenEdgePadding;

lib/src/tooltip/tooltip_widget.dart

@@ -50,6 +50,7 @@ class ToolTipWidget extends StatefulWidget {
     required this.showcaseController,
     required this.tooltipPadding,
     required this.toolTipSlideEndDistance,
+    required this.targetTooltipGap,
     this.scaleAnimationAlignment,
     this.tooltipPosition,
     this.titlePadding,
@@ -90,6 +91,7 @@ class ToolTipWidget extends StatefulWidget {
   final List<Widget> tooltipActions;
   final EdgeInsets targetPadding;
   final ShowcaseController showcaseController;
+  final double targetTooltipGap;
 
   @override
   State<ToolTipWidget> createState() => _ToolTipWidgetState();
@@ -272,6 +274,7 @@ class _ToolTipWidgetState extends State<ToolTipWidget>
         showcaseOffset: widget.showcaseController.rootRenderObject
                 ?.localToGlobal(Offset.zero) ??
             Offset.zero,
+        targetTooltipGap: widget.targetTooltipGap,
         children: [
           _TooltipLayoutId(
             id: TooltipLayoutSlot.tooltipBox,

lib/src/utils/constants.dart

@@ -38,9 +38,6 @@ class Constants {
   /// Padding when arrow is not visible
   static const double withOutArrowToolTipPadding = 0;
 
-  /// Distance between target and tooltip
-  static const double tooltipOffset = 10;
-
   /// Minimum tooltip dimensions to maintain usability
   static const double minimumToolTipWidth = 50;
   // Currently we are not constraining height but will do in future