feat: ✨ Added left and right tooltip position with improved tooltip v2 (#511)

* fix: ⚡ updated tooltip implementation and also added support for left and right side tooltip

Author: Sahil-Simform

CHANGELOG.md

@@ -7,6 +7,10 @@
   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.
+- Improvement [#511](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/pull/511) -
+  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.
 
 ## [4.0.1]
 - Fixed [#493](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/493) - ShowCase.withWidget not showing issue 

analysis_options.yaml

@@ -22,3 +22,4 @@ linter:
     avoid_positional_boolean_parameters: false
     use_super_parameters: true
     prefer_relative_imports: true
+    require_trailing_commas: true

lib/src/constants.dart

@@ -0,0 +1,28 @@
+class Constants {
+  Constants._();
+
+  /// Arrow dimensions
+  static const double arrowWidth = 18;
+  static const double arrowHeight = 9;
+
+  static const double arrowStrokeWidth = 10;
+
+  /// Padding when arrow is visible
+  static const double withArrowToolTipPadding = 7;
+
+  /// 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
+  static const double minimumToolTipHeight = 50;
+
+  /// This is amount of extra offset scale alignment will have
+  /// i.e if it is bottom position then centerBottom + [extraAlignmentOffset]
+  /// in bottom
+  static const double extraAlignmentOffset = 5;
+}

lib/src/enum.dart

@@ -20,9 +20,56 @@
  * SOFTWARE.
  */
 
+import 'dart:math';
+
+import 'package:flutter/widgets.dart';
+
 import 'showcase_widget.dart';
+import 'tooltip/render_object_manager.dart';
+
+enum TooltipPosition {
+  top(rotationAngle: pi, scaleAlignment: Alignment.topCenter),
+  bottom(rotationAngle: 0, scaleAlignment: Alignment.bottomCenter),
+  left(rotationAngle: pi * 0.5, scaleAlignment: Alignment.centerLeft),
+  right(rotationAngle: 3 * pi * 0.5, scaleAlignment: Alignment.centerRight);
+
+  const TooltipPosition({
+    required this.rotationAngle,
+    required this.scaleAlignment,
+  });
+
+  /// Initial position of the arrow is pointing top so we need to rotate as per the position of the tooltip
+  /// This will provide necessary rotation to properly point arrow
+  final double rotationAngle;
+
+  /// Determines the default scale alignment based on tooltip position.
+  final Alignment scaleAlignment;
+
+  /// Computes the offset movement animation based on tooltip position.
+  Offset calculateMoveOffset(
+    double animationValue,
+    double toolTipSlideEndDistance,
+  ) {
+    switch (this) {
+      case TooltipPosition.top:
+        return Offset(0, (1 - animationValue) * -toolTipSlideEndDistance);
+      case TooltipPosition.bottom:
+        return Offset(0, (1 - animationValue) * toolTipSlideEndDistance);
+      case TooltipPosition.left:
+        return Offset((1 - animationValue) * -toolTipSlideEndDistance, 0);
+      case TooltipPosition.right:
+        return Offset((1 - animationValue) * toolTipSlideEndDistance, 0);
+    }
+  }
+
+  bool get isRight => this == TooltipPosition.right;
+  bool get isLeft => this == TooltipPosition.left;
+  bool get isTop => this == TooltipPosition.top;
+  bool get isBottom => this == TooltipPosition.bottom;
 
-enum TooltipPosition { top, bottom }
+  bool get isHorizontal => isRight || isLeft;
+  bool get isVertical => isTop || isBottom;
+}
 
 enum TooltipActionPosition {
   outside,
@@ -60,3 +107,14 @@ enum TooltipDefaultActionType {
     }
   }
 }
+
+/// These are the ToolTip layout widget ids and will be used to identify
+/// the widget during layout and painting phase
+enum TooltipLayoutSlot {
+  tooltipBox,
+  actionBox,
+  arrow;
+
+  RenderObjectManager? get getObjectManager =>
+      RenderObjectManager.renderObjects[this];
+}

lib/src/get_position.dart

@@ -44,6 +44,8 @@ class GetPosition {
   late final RenderBox? _box;
   late final Offset? _boxOffset;
 
+  RenderBox? get box => _box;
+
   void getRenderBox() {
     var renderBox = key.currentContext?.findRenderObject() as RenderBox?;
 

lib/src/layout_overlays.dart

@@ -25,7 +25,10 @@ import 'package:flutter/material.dart';
 import 'showcase_widget.dart';
 
 typedef OverlayBuilderCallback = Widget Function(
-    BuildContext, Rect anchorBounds, Offset anchor);
+  BuildContext context,
+  Rect anchorBounds,
+  Offset anchor,
+);
 
 /// Displays an overlay Widget anchored directly above the center of this
 /// [AnchoredOverlay].

lib/src/showcase.dart

@@ -33,8 +33,8 @@ import 'models/tooltip_action_button.dart';
 import 'models/tooltip_action_config.dart';
 import 'shape_clipper.dart';
 import 'showcase_widget.dart';
+import 'tooltip/tooltip.dart';
 import 'tooltip_action_button_widget.dart';
-import 'tooltip_widget.dart';
 import 'widget/floating_action_widget.dart';
 
 class Showcase extends StatefulWidget {
@@ -272,8 +272,8 @@ class Showcase extends StatefulWidget {
   /// To understand how text is aligned, check [TextAlign]
   final TextAlign descriptionTextAlign;
 
-  /// Defines the margin for the tooltip.
-  /// Which is from 0 to [toolTipSlideEndDistance].
+  /// Defines the margin from the screen edge for the tooltip.
+  /// ToolTip will try to not cross this border around the screen
   ///
   /// Defaults to 14.
   final double toolTipMargin;
@@ -357,7 +357,7 @@ class Showcase extends StatefulWidget {
   ///   - `blurValue`: The amount of background blur applied during the showcase.
   ///   - `tooltipPosition`: The position of the tooltip relative to the showcased widget.
   ///   - `toolTipSlideEndDistance`: The distance the tooltip slides in from the edge of the screen (defaults to 7dp).
-  ///   - `toolTipMargin`: The margin around the tooltip (defaults to 14dp).
+  ///   - `toolTipMargin`: The margin around the screen which tooltip try not to cross (defaults to 14dp).
   ///   - `tooltipActions`: A list of custom actions (widgets) to display within the tooltip.
   ///   - `tooltipActionConfig`: Configuration options for custom tooltip actions.
   ///   - `scrollAlignment`: Defines the alignment for the auto scroll function.
@@ -424,14 +424,22 @@ class Showcase extends StatefulWidget {
   })  : height = null,
         width = null,
         container = null,
-        assert(overlayOpacity >= 0.0 && overlayOpacity <= 1.0,
-            "overlay opacity must be between 0 and 1."),
-        assert(onTargetClick == null || disposeOnTap != null,
-            "disposeOnTap is required if you're using onTargetClick"),
-        assert(disposeOnTap == null || onTargetClick != null,
-            "onTargetClick is required if you're using disposeOnTap"),
-        assert(onBarrierClick == null || disableBarrierInteraction == false,
-            "can't use onBarrierClick & disableBarrierInteraction property at same time");
+        assert(
+          overlayOpacity >= 0.0 && overlayOpacity <= 1.0,
+          "overlay opacity must be between 0 and 1.",
+        ),
+        assert(
+          onTargetClick == null || disposeOnTap != null,
+          "disposeOnTap is required if you're using onTargetClick",
+        ),
+        assert(
+          disposeOnTap == null || onTargetClick != null,
+          "onTargetClick is required if you're using disposeOnTap",
+        ),
+        assert(
+          onBarrierClick == null || disableBarrierInteraction == false,
+          "can't use onBarrierClick & disableBarrierInteraction property at same time",
+        );
 
   /// Creates a Showcase widget with a custom tooltip widget.
   ///
@@ -501,7 +509,8 @@ class Showcase extends StatefulWidget {
     this.targetBorderRadius,
     this.overlayOpacity = 0.75,
     this.scrollLoadingWidget = const CircularProgressIndicator(
-        valueColor: AlwaysStoppedAnimation(Colors.white)),
+      valueColor: AlwaysStoppedAnimation(Colors.white),
+    ),
     this.onTargetClick,
     this.disposeOnTap,
     this.movingAnimationDuration = const Duration(milliseconds: 2000),
@@ -542,10 +551,14 @@ class Showcase extends StatefulWidget {
         titleTextDirection = null,
         descriptionTextDirection = null,
         toolTipMargin = 14,
-        assert(overlayOpacity >= 0.0 && overlayOpacity <= 1.0,
-            "overlay opacity must be between 0 and 1."),
-        assert(onBarrierClick == null || disableBarrierInteraction == false,
-            "can't use onBarrierClick & disableBarrierInteraction property at same time");
+        assert(
+          overlayOpacity >= 0.0 && overlayOpacity <= 1.0,
+          "overlay opacity must be between 0 and 1.",
+        ),
+        assert(
+          onBarrierClick == null || disableBarrierInteraction == false,
+          "can't use onBarrierClick & disableBarrierInteraction property at same time",
+        );
 
   @override
   State<Showcase> createState() => _ShowcaseState();
@@ -606,8 +619,9 @@ class _ShowcaseState extends State<Showcase> {
 
       if (showCaseWidgetState.autoPlay) {
         timer = Timer(
-            Duration(seconds: showCaseWidgetState.autoPlayDelay.inSeconds),
-            _nextIfAny);
+          Duration(seconds: showCaseWidgetState.autoPlayDelay.inSeconds),
+          _nextIfAny,
+        );
       }
     } else if (timer?.isActive ?? false) {
       timer?.cancel();
@@ -770,6 +784,9 @@ class _ShowcaseState extends State<Showcase> {
                       height: mediaQuerySize.height,
                       decoration: BoxDecoration(
                         color: widget.overlayColor
+
+                            //TODO: Update when we remove support for older version
+                            //ignore: deprecated_member_use
                             .withOpacity(widget.overlayOpacity),
                       ),
                     ),
@@ -779,6 +796,8 @@ class _ShowcaseState extends State<Showcase> {
                     height: mediaQuerySize.height,
                     decoration: BoxDecoration(
                       color: widget.overlayColor
+                          //TODO: Update when we remove support for older version
+                          //ignore: deprecated_member_use
                           .withOpacity(widget.overlayOpacity),
                     ),
                   ),
@@ -799,8 +818,6 @@ class _ShowcaseState extends State<Showcase> {
           ),
           ToolTipWidget(
             position: position,
-            offset: offset,
-            screenSize: screenSize,
             title: widget.title,
             titleTextAlign: widget.titleTextAlign,
             description: widget.description,
@@ -810,22 +827,19 @@ class _ShowcaseState extends State<Showcase> {
             titleTextStyle: widget.titleTextStyle,
             descTextStyle: widget.descTextStyle,
             container: widget.container,
-            floatingActionWidget:
-                widget.floatingActionWidget ?? _globalFloatingActionWidget,
             tooltipBackgroundColor: widget.tooltipBackgroundColor,
             textColor: widget.textColor,
             showArrow: widget.showArrow,
-            contentHeight: widget.height,
-            contentWidth: widget.width,
             onTooltipTap:
                 widget.disposeOnTap == true || widget.onToolTipClick != null
                     ? _getOnTooltipTap
                     : null,
             tooltipPadding: widget.tooltipPadding,
             disableMovingAnimation: widget.disableMovingAnimation ??
                 showCaseWidgetState.disableMovingAnimation,
-            disableScaleAnimation: widget.disableScaleAnimation ??
-                showCaseWidgetState.disableScaleAnimation,
+            disableScaleAnimation: (widget.disableScaleAnimation ??
+                    showCaseWidgetState.disableScaleAnimation) ||
+                widget.container != null,
             movingAnimationDuration: widget.movingAnimationDuration,
             tooltipBorderRadius: widget.tooltipBorderRadius,
             scaleAnimationDuration: widget.scaleAnimationDuration,
@@ -841,12 +855,17 @@ class _ShowcaseState extends State<Showcase> {
             toolTipMargin: widget.toolTipMargin,
             tooltipActionConfig: _getTooltipActionConfig(),
             tooltipActions: _getTooltipActions(),
+            targetPadding: widget.targetPadding,
           ),
+          if (_getFloatingActionWidget != null) _getFloatingActionWidget!,
         ],
       ],
     );
   }
 
+  Widget? get _getFloatingActionWidget =>
+      widget.floatingActionWidget ?? _globalFloatingActionWidget;
+
   List<Widget> _getTooltipActions() {
     final actionData = (widget.tooltipActions?.isNotEmpty ?? false)
         ? widget.tooltipActions!

lib/src/showcase_widget.dart

@@ -219,7 +219,7 @@ class ShowCaseWidgetState extends State<ShowCaseWidget> {
   /// This Stores keys of showcase for which we will hide the
   /// [globalFloatingActionWidget].
   late final _hideFloatingWidgetKeys = {
-    for (final item in widget.hideFloatingActionWidgetForShowcase) item: true
+    for (final item in widget.hideFloatingActionWidgetForShowcase) item: true,
   };
 
   /// Returns value of [ShowCaseWidget.blurValue]