feature: ✨ Tooltip action widget

- Added `toolTipAction` parameter in `Showcase` which is used to get action widget configuration and defaults to `null`
- Added `DefaultToolTipActionWidget` class for default tooltip action widgets

Author: faiyaz-shaikh

example/lib/main.dart

@@ -235,6 +235,10 @@ class _MailPageState extends State<MailPage> {
                         ),
                         child: Image.asset('assets/simform.png'),
                       ),
+                      toolTipAction: DefaultToolTipActionWidget(
+                        color: Colors.white,
+                        showCaseWidgetState: ShowCaseWidget.of(context),
+                      ),
                     ),
                     const SizedBox(
                       width: 12,
@@ -314,27 +318,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,
+          ),
+        ),
       ),
     );
   }

lib/showcaseview.dart

@@ -25,3 +25,4 @@ library showcaseview;
 export 'src/enum.dart';
 export 'src/showcase.dart';
 export 'src/showcase_widget.dart';
+export 'src/tooltip_action.dart';

lib/src/showcase.dart

@@ -32,6 +32,7 @@ import 'get_position.dart';
 import 'layout_overlays.dart';
 import 'shape_clipper.dart';
 import 'showcase_widget.dart';
+import 'tooltip_action.dart';
 import 'tooltip_widget.dart';
 
 class Showcase extends StatefulWidget {
@@ -232,6 +233,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;
 
@@ -288,6 +294,7 @@ class Showcase extends StatefulWidget {
     this.tooltipPosition,
     this.titlePadding,
     this.descriptionPadding,
+    this.toolTipAction,
     this.titleTextDirection,
     this.descriptionTextDirection,
     this.onBarrierClick,
@@ -350,6 +357,7 @@ class Showcase extends StatefulWidget {
         tooltipPadding = const EdgeInsets.symmetric(vertical: 8),
         titlePadding = null,
         descriptionPadding = null,
+        toolTipAction = null,
         titleTextDirection = null,
         descriptionTextDirection = null,
         assert(overlayOpacity >= 0.0 && overlayOpacity <= 1.0,
@@ -619,6 +627,7 @@ class _ShowcaseState extends State<Showcase> {
             tooltipPosition: widget.tooltipPosition,
             titlePadding: widget.titlePadding,
             descriptionPadding: widget.descriptionPadding,
+            toolTipAction: widget.toolTipAction,
             titleTextDirection: widget.titleTextDirection,
             descriptionTextDirection: widget.descriptionTextDirection,
           ),

lib/src/tooltip_action.dart

@@ -0,0 +1,81 @@
+import 'package:flutter/material.dart';
+
+import 'showcase_widget.dart';
+
+/// Default Tooltip action Widget Nav
+/// Shows tooltip navigation and index / count elements if the conditions are
+/// indicated.
+class DefaultToolTipActionWidget extends StatelessWidget {
+  const DefaultToolTipActionWidget({
+    Key? key,
+    required this.color,
+    required this.showCaseWidgetState,
+    this.padding = const EdgeInsets.only(top: 5),
+    this.textStyle,
+    this.iconSize,
+  }) : super(key: key);
+
+  final Color? color;
+  final ShowCaseWidgetState showCaseWidgetState;
+  final EdgeInsets padding;
+  final TextStyle? textStyle;
+  final double? iconSize;
+
+  @override
+  Widget build(BuildContext context) {
+    var ids = showCaseWidgetState.ids;
+    var activeWidgetId = showCaseWidgetState.activeWidgetId;
+    bool isFirstTip = activeWidgetId == 0;
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        GestureDetector(
+          behavior: HitTestBehavior.translucent,
+          onTap: (isFirstTip)
+              ? null
+              : () {
+                  showCaseWidgetState.previous();
+                },
+          child: Padding(
+            padding: padding,
+            child: Icon(
+              Icons.keyboard_arrow_left,
+              size: iconSize,
+              color: (isFirstTip)
+                  ? color?.withOpacity(0.3) ?? Colors.black26
+                  : color,
+            ),
+          ),
+        ),
+        if (ids != null && activeWidgetId != null) ...[
+          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),
+        ],
+        GestureDetector(
+          behavior: HitTestBehavior.translucent,
+          onTap: () {
+            showCaseWidgetState.next();
+          },
+          child: Padding(
+            padding: padding,
+            child: Icon(
+              Icons.keyboard_arrow_right,
+              color: color,
+              size: iconSize,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}