feat: ✨ Tooltip action widget

example/lib/main.dart

@@ -232,6 +232,20 @@ class _MailPageState extends State<MailPage> {
                         ),
                         child: Image.asset('assets/simform.png'),
                       ),
+                      toolTipAction: DefaultToolTipAction(
+                        color: Colors.white,
+                        showCaseWidgetState: ShowCaseWidget.of(context),
+                        back: const Icon(
+                          Icons.arrow_back,
+                          color: Colors.white,
+                        ),
+                        forward: const Icon(
+                          Icons.arrow_forward,
+                          color: Colors.white,
+                        ),
+                        onBackPress: () => debugPrint('Back Pressed!'),
+                        onForwardPress: () => debugPrint('Forward Pressed!'),
+                      ),
                     ),
                     const SizedBox(
                       width: 12,
@@ -311,27 +325,28 @@ class _MailPageState extends State<MailPage> {
       child: Container(
         padding: const EdgeInsets.symmetric(vertical: 8),
         child: Showcase(
-            key: key,
-            description: 'Tap to check mail',
-            tooltipPosition: TooltipPosition.top,
-            disposeOnTap: true,
-            onTargetClick: () {
-              Navigator.push<void>(
-                context,
-                MaterialPageRoute<void>(
-                  builder: (_) => const Detail(),
-                ),
-              ).then((_) {
-                setState(() {
-                  ShowCaseWidget.of(context).startShowCase([_four, _five]);
-                });
+          key: key,
+          description: 'Tap to check mail',
+          tooltipPosition: TooltipPosition.top,
+          disposeOnTap: true,
+          onTargetClick: () {
+            Navigator.push<void>(
+              context,
+              MaterialPageRoute<void>(
+                builder: (_) => const Detail(),
+              ),
+            ).then((_) {
+              setState(() {
+                ShowCaseWidget.of(context).startShowCase([_four, _five]);
               });
-            },
-            child: MailTile(
-              mail: mail,
-              showCaseKey: _four,
-              showCaseDetail: showCaseDetail,
-            )),
+            });
+          },
+          child: MailTile(
+            mail: mail,
+            showCaseKey: _four,
+            showCaseDetail: showCaseDetail,
+          ),
+        ),
       ),
     );
   }
@@ -446,6 +461,12 @@ class MailTile extends StatelessWidget {
                         )
                       ],
                     ),
+                    toolTipAction: DefaultToolTipAction(
+                      color: Colors.white,
+                      showCaseWidgetState: ShowCaseWidget.of(context),
+                      onBackPress: () => debugPrint('Back Pressed!'),
+                      onForwardPress: () => debugPrint('Forward Pressed!'),
+                    ),
                     child: const SAvatarExampleChild(),
                   )
                 else

lib/showcaseview.dart

@@ -22,6 +22,7 @@
 
 library showcaseview;
 
+export 'src/default_tooltip_action.dart';
 export 'src/enum.dart';
 export 'src/showcase.dart';
 export 'src/showcase_widget.dart';

lib/src/default_tooltip_action.dart

@@ -0,0 +1,97 @@
+import 'package:flutter/material.dart';
+
+import 'showcase_widget.dart';
+import 'tooltip_action_button.dart';
+
+/// Default Tooltip action Widget Nav
+/// Shows tooltip navigation and index / count elements if the conditions are
+/// indicated.
+class DefaultToolTipAction extends StatelessWidget {
+  const DefaultToolTipAction({
+    super.key,
+    this.color = Colors.black,
+    required this.showCaseWidgetState,
+    this.padding = const EdgeInsets.only(top: 5),
+    this.textStyle,
+    this.iconSize,
+    this.back,
+    this.forward,
+    this.buttonColor,
+    this.onBackPress,
+    this.onForwardPress,
+  });
+
+  final Color color;
+  final ShowCaseWidgetState showCaseWidgetState;
+  final EdgeInsets padding;
+  final TextStyle? textStyle;
+  final double? iconSize;
+  final Widget? back;
+  final Widget? forward;
+  final Color? buttonColor;
+  final VoidCallback? onBackPress;
+  final VoidCallback? onForwardPress;
+
+  @override
+  Widget build(BuildContext context) {
+    var ids = showCaseWidgetState.ids;
+    var activeWidgetId = showCaseWidgetState.activeWidgetId;
+    bool isFirstTip = activeWidgetId == 0;
+    bool isLastTip = activeWidgetId == (ids!.length - 1);
+
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        if (ids.isNotEmpty && activeWidgetId != null) ...[
+          ToolTipActionButton(
+            action: isFirstTip
+                ? null
+                : () {
+                    showCaseWidgetState.previous();
+                    onBackPress?.call();
+                  },
+            padding: padding,
+            widget: back ??
+                Icon(
+                  Icons.keyboard_arrow_left,
+                  color: buttonColor ?? color,
+                ),
+            opacity: isFirstTip ? 0.3 : 1,
+          ),
+          const SizedBox(
+            width: 4.0,
+          ),
+          Padding(
+            padding: padding,
+            child: Text(
+              "${activeWidgetId + 1} / ${ids.length}",
+              style: textStyle ??
+                  Theme.of(context).textTheme.bodyMedium?.copyWith(
+                        color: color,
+                      ),
+            ),
+          ),
+          const SizedBox(
+            width: 4.0,
+          ),
+          ToolTipActionButton(
+            action: isLastTip
+                ? null
+                : () {
+                    showCaseWidgetState.next();
+                    onForwardPress?.call();
+                  },
+            padding: padding,
+            widget: forward ??
+                Icon(
+                  Icons.keyboard_arrow_right,
+                  color: buttonColor ?? color,
+                ),
+            opacity: isLastTip ? 0.3 : 1,
+          )
+        ],
+      ],
+    );
+  }
+}

lib/src/showcase.dart

@@ -231,6 +231,11 @@ class Showcase extends StatefulWidget {
   /// Provides padding around the description. Default padding is zero.
   final EdgeInsets? descriptionPadding;
 
+  /// Provides tooTip action widgets at bottom in tool tip.
+  ///
+  /// one can use [DefaultToolTipActionWidget] class to use default action
+  final Widget? toolTipAction;
+
   /// Provides text direction of tooltip title.
   final TextDirection? titleTextDirection;
 
@@ -293,6 +298,7 @@ class Showcase extends StatefulWidget {
     this.tooltipPosition,
     this.titlePadding,
     this.descriptionPadding,
+    this.toolTipAction,
     this.titleTextDirection,
     this.descriptionTextDirection,
     this.onBarrierClick,
@@ -339,6 +345,7 @@ class Showcase extends StatefulWidget {
     this.onBarrierClick,
     this.disableBarrierInteraction = false,
     this.toolTipSlideEndDistance = 7,
+    this.toolTipAction,
   })  : showArrow = false,
         onToolTipClick = null,
         scaleAnimationDuration = const Duration(milliseconds: 300),
@@ -629,6 +636,7 @@ class _ShowcaseState extends State<Showcase> {
             tooltipPosition: widget.tooltipPosition,
             titlePadding: widget.titlePadding,
             descriptionPadding: widget.descriptionPadding,
+            toolTipAction: widget.toolTipAction,
             titleTextDirection: widget.titleTextDirection,
             descriptionTextDirection: widget.descriptionTextDirection,
             toolTipSlideEndDistance: widget.toolTipSlideEndDistance,

lib/src/tooltip_action_button.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+class ToolTipActionButton extends StatelessWidget {
+  const ToolTipActionButton({
+    Key? key,
+    required this.action,
+    required this.padding,
+    required this.widget,
+    required this.opacity,
+  }) : super(key: key);
+
+  final VoidCallback? action;
+  final EdgeInsetsGeometry padding;
+  final Widget? widget;
+  final double opacity;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: HitTestBehavior.translucent,
+      onTap: action,
+      child: IgnorePointer(
+        child: Opacity(
+          opacity: opacity,
+          child: Padding(
+            padding: padding,
+            child: widget,
+          ),
+        ),
+      ),
+    );
+  }
+}