✨ Tooltip action widget

example/lib/main.dart

@@ -192,6 +192,29 @@ class _MailPageState extends State<MailPage> {
                                           color: Theme.of(context).primaryColor,
                                         ),
                                       ),
+                                      toolTipAction: ToolTipAction(
+                                        actionOne: ActionWidgetConfig(
+                                          actionTitle: 'Prev',
+                                          onActionTap:
+                                              ShowCaseWidget.of(context)
+                                                  .previous,
+                                        ),
+                                        actionTwo: ActionWidgetConfig(
+                                          actionTitle: 'Next',
+                                          decoration: BoxDecoration(
+                                            color:
+                                                Theme.of(context).primaryColor,
+                                            borderRadius:
+                                                BorderRadius.circular(20),
+                                          ),
+                                          padding: const EdgeInsets.all(10),
+                                          onActionTap:
+                                              ShowCaseWidget.of(context).next,
+                                        ),
+                                        actionPadding:
+                                            const EdgeInsets.symmetric(
+                                                vertical: 5),
+                                      ),
                                     ),
                                     const SizedBox(
                                       width: 10,
@@ -236,6 +259,23 @@ class _MailPageState extends State<MailPage> {
                         ),
                         child: Image.asset('assets/simform.png'),
                       ),
+                      toolTipAction: ToolTipAction(
+                        actionOne: ActionWidgetConfig(
+                          actionTitle: 'Prev',
+                          onActionTap: ShowCaseWidget.of(context).previous,
+                          textStyle: const TextStyle(color: Colors.white),
+                        ),
+                        actionTwo: ActionWidgetConfig(
+                          actionTitle: 'Next',
+                          decoration: BoxDecoration(
+                            color: Colors.white,
+                            borderRadius: BorderRadius.circular(20),
+                          ),
+                          padding: const EdgeInsets.all(10),
+                          onActionTap: ShowCaseWidget.of(context).next,
+                        ),
+                        actionPadding: const EdgeInsets.symmetric(vertical: 5),
+                      ),
                     ),
                     const SizedBox(
                       width: 12,
@@ -297,6 +337,22 @@ class _MailPageState extends State<MailPage> {
             Icons.add,
           ),
         ),
+        toolTipAction: ToolTipAction(
+          actionOne: ActionWidgetConfig(
+            actionTitle: 'Prev',
+            onActionTap: ShowCaseWidget.of(context).previous,
+          ),
+          actionTwo: ActionWidgetConfig(
+            actionTitle: 'Next',
+            decoration: BoxDecoration(
+              color: Theme.of(context).primaryColor,
+              borderRadius: BorderRadius.circular(20),
+            ),
+            padding: const EdgeInsets.all(10),
+            onActionTap: ShowCaseWidget.of(context).next,
+          ),
+          actionPadding: const EdgeInsets.symmetric(vertical: 5),
+        ),
       ),
     );
   }
@@ -315,27 +371,44 @@ 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,
+          ),
+          toolTipAction: ToolTipAction(
+            actionOne: ActionWidgetConfig(
+              actionTitle: 'Prev',
+              onActionTap: ShowCaseWidget.of(context).previous,
+            ),
+            actionTwo: ActionWidgetConfig(
+              actionTitle: 'Next',
+              decoration: BoxDecoration(
+                color: Theme.of(context).primaryColor,
+                borderRadius: BorderRadius.circular(20),
+              ),
+              padding: const EdgeInsets.all(10),
+              onActionTap: ShowCaseWidget.of(context).next,
+            ),
+            actionPadding: const EdgeInsets.symmetric(vertical: 5),
+          ),
+        ),
       ),
     );
   }

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,9 @@ class Showcase extends StatefulWidget {
   /// Provides padding around the description. Default padding is zero.
   final EdgeInsets? descriptionPadding;
 
+  /// Provides tooltip action
+  final ToolTipAction? toolTipAction;
+
   /// Provides text direction of tooltip title.
   final TextDirection? titleTextDirection;
 
@@ -285,6 +289,7 @@ class Showcase extends StatefulWidget {
     this.tooltipPosition,
     this.titlePadding,
     this.descriptionPadding,
+    this.toolTipAction,
     this.titleTextDirection,
     this.descriptionTextDirection,
     this.onBarrierClick,
@@ -343,6 +348,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,
@@ -571,6 +577,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,102 @@
+import 'package:flutter/material.dart';
+
+class ToolTipAction extends StatelessWidget {
+  const ToolTipAction({
+    Key? key,
+    this.actionOne,
+    this.actionTwo,
+    this.actionPadding,
+    this.alignment = WrapAlignment.spaceBetween,
+    this.crossAxisAlignment = WrapCrossAlignment.center,
+  })  : actions = null,
+        super(key: key);
+
+  const ToolTipAction.customAction({
+    Key? key,
+    this.actions,
+    this.actionPadding,
+    this.alignment = WrapAlignment.spaceBetween,
+    this.crossAxisAlignment = WrapCrossAlignment.center,
+  })  : actionOne = null,
+        actionTwo = null,
+        super(key: key);
+
+  /// Define configuration of first action
+  final ActionWidgetConfig? actionOne;
+
+  /// Define configuration of second action
+  final ActionWidgetConfig? actionTwo;
+
+  /// Define padding of action widget
+  final EdgeInsets? actionPadding;
+
+  /// Define configuration of list of action
+  final List<ActionWidgetConfig>? actions;
+
+  /// Define alignment of actions
+  final WrapAlignment alignment;
+
+  /// Define crossAxisAlignment of actions
+  final WrapCrossAlignment crossAxisAlignment;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: actionPadding ?? EdgeInsets.zero,
+      child: Wrap(
+        alignment: alignment,
+        crossAxisAlignment: crossAxisAlignment,
+        children: actions != null
+            ? [for (final action in actions!) getActionWidget(action)]
+            : [getActionWidget(actionOne), getActionWidget(actionTwo)],
+      ),
+    );
+  }
+
+  Widget getActionWidget(ActionWidgetConfig? actionWidgetConfig) {
+    if (actionWidgetConfig == null) return const SizedBox();
+    return GestureDetector(
+      onTap: actionWidgetConfig.onActionTap,
+      child: Container(
+        decoration: actionWidgetConfig.decoration,
+        padding: actionWidgetConfig.padding,
+        margin: actionWidgetConfig.margin,
+        child: Text(
+          actionWidgetConfig.actionTitle,
+          style: actionWidgetConfig.textStyle,
+          maxLines: 1,
+        ),
+      ),
+    );
+  }
+}
+
+class ActionWidgetConfig {
+  const ActionWidgetConfig({
+    Key? key,
+    required this.actionTitle,
+    this.decoration,
+    this.padding,
+    this.margin,
+    this.textStyle,
+    required this.onActionTap,
+  });
+
+  /// Defines title of action
+  final String actionTitle;
+
+  /// Defines decoration of action
+  final BoxDecoration? decoration;
+
+  /// Provide padding to the action
+  final EdgeInsets? padding;
+
+  /// Provide margin to the action
+  final EdgeInsets? margin;
+
+  /// Define text style of action
+  final TextStyle? textStyle;
+
+  /// Called when user tap on action
+  final VoidCallback onActionTap;
+}