feat: ✨Add staticContainer into ToolTipWidget for a custom tooltip th…

CHANGELOG.md

@@ -1,7 +1,9 @@
 ## [3.0.1]
 
-- Feature [#475](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/475) - Add
+- Feature [#475](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/475) - Added
   feasibility to change margin of tooltip with `toolTipMargin`.
+- Feature [#395](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/395) -
+  Added `floatingActionWidget` to give a static fixed widget at any place on the screen.
 
 ## [3.0.0]
 - [BREAKING] Fixed [#434](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/434) removed deprecated text style after Flutter 3.22 follow [migration guide](https://docs.flutter.dev/release/breaking-changes/3-19-deprecations#texttheme)

example/lib/main.dart

@@ -221,6 +221,38 @@ class _MailPageState extends State<MailPage> {
                           "Tap to see profile which contains user's name, profile picture, mobile number and country",
                       tooltipBackgroundColor: Theme.of(context).primaryColor,
                       textColor: Colors.white,
+                      floatingActionWidget: FloatingActionWidget(
+                        left: 0,
+                        bottom: 0,
+                        child: Padding(
+                          padding: const EdgeInsets.all(16.0),
+                          child: ElevatedButton(
+                            style: ButtonStyle(
+                              backgroundColor: MaterialStateProperty.all<Color>(
+                                  Theme.of(context).primaryColor),
+                              shape: MaterialStateProperty.all<
+                                  RoundedRectangleBorder>(
+                                RoundedRectangleBorder(
+                                  borderRadius: BorderRadius.circular(18.0),
+                                  side: BorderSide(
+                                    color: Theme.of(context).primaryColor,
+                                    width: 2.0,
+                                  ),
+                                ),
+                              ),
+                            ),
+                            child: const Text(
+                              'Skip Showcase',
+                              style: TextStyle(
+                                color: Colors.white,
+                                fontSize: 15,
+                              ),
+                            ),
+                            onPressed: () =>
+                                ShowCaseWidget.of(context).dismiss(),
+                          ),
+                        ),
+                      ),
                       targetShapeBorder: const CircleBorder(),
                       child: Container(
                         padding: const EdgeInsets.all(5),
@@ -416,6 +448,38 @@ class MailTile extends StatelessWidget {
                     targetBorderRadius: const BorderRadius.all(
                       Radius.circular(150),
                     ),
+                    floatingActionWidget: FloatingActionWidget.directional(
+                      textDirection: Directionality.of(context),
+                      start: 0,
+                      bottom: 0,
+                      child: Padding(
+                        padding: const EdgeInsets.all(16.0),
+                        child: ElevatedButton(
+                          style: ButtonStyle(
+                            backgroundColor: MaterialStateProperty.all<Color>(
+                                Theme.of(context).primaryColor),
+                            shape: MaterialStateProperty.all<
+                                RoundedRectangleBorder>(
+                              RoundedRectangleBorder(
+                                borderRadius: BorderRadius.circular(18.0),
+                                side: BorderSide(
+                                  color: Theme.of(context).primaryColor,
+                                  width: 2.0,
+                                ),
+                              ),
+                            ),
+                          ),
+                          child: const Text(
+                            'Skip Showcase',
+                            style: TextStyle(
+                              color: Colors.white,
+                              fontSize: 15,
+                            ),
+                          ),
+                          onPressed: () => ShowCaseWidget.of(context).dismiss(),
+                        ),
+                      ),
+                    ),
                     container: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: <Widget>[

lib/showcaseview.dart

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

lib/src/showcase.dart

@@ -32,6 +32,7 @@ import 'layout_overlays.dart';
 import 'shape_clipper.dart';
 import 'showcase_widget.dart';
 import 'tooltip_widget.dart';
+import 'widget/floating_action_widget.dart';
 
 class Showcase extends StatefulWidget {
   /// A key that is unique across the entire app.
@@ -98,6 +99,10 @@ class Showcase extends StatefulWidget {
   /// Custom tooltip widget when [Showcase.withWidget] is used.
   final Widget? container;
 
+  /// Custom static floating action widget to show a static widget anywhere
+  /// on the screen
+  final FloatingActionWidget? floatingActionWidget;
+
   /// Defines background color for tooltip widget.
   ///
   /// Default to [Colors.white]
@@ -305,6 +310,7 @@ class Showcase extends StatefulWidget {
     this.disableBarrierInteraction = false,
     this.toolTipSlideEndDistance = 7,
     this.toolTipMargin = 14,
+    this.floatingActionWidget,
   })  : height = null,
         width = null,
         container = null,
@@ -323,6 +329,7 @@ class Showcase extends StatefulWidget {
     required this.width,
     required this.container,
     required this.child,
+    this.floatingActionWidget,
     this.targetShapeBorder = const RoundedRectangleBorder(
       borderRadius: BorderRadius.all(
         Radius.circular(8),
@@ -617,6 +624,7 @@ class _ShowcaseState extends State<Showcase> {
             titleTextStyle: widget.titleTextStyle,
             descTextStyle: widget.descTextStyle,
             container: widget.container,
+            floatingActionWidget: widget.floatingActionWidget,
             tooltipBackgroundColor: widget.tooltipBackgroundColor,
             textColor: widget.textColor,
             showArrow: widget.showArrow,

lib/src/tooltip_widget.dart

@@ -27,6 +27,7 @@ import 'package:flutter/material.dart';
 import 'enum.dart';
 import 'get_position.dart';
 import 'measure_size.dart';
+import 'widget/floating_action_widget.dart';
 import 'widget/tooltip_slide_transition.dart';
 
 class ToolTipWidget extends StatefulWidget {
@@ -40,6 +41,7 @@ class ToolTipWidget extends StatefulWidget {
   final TextStyle? titleTextStyle;
   final TextStyle? descTextStyle;
   final Widget? container;
+  final FloatingActionWidget? floatingActionWidget;
   final Color? tooltipBackgroundColor;
   final Color? textColor;
   final bool showArrow;
@@ -74,6 +76,7 @@ class ToolTipWidget extends StatefulWidget {
     required this.titleTextStyle,
     required this.descTextStyle,
     required this.container,
+    required this.floatingActionWidget,
     required this.tooltipBackgroundColor,
     required this.textColor,
     required this.showArrow,
@@ -365,7 +368,7 @@ class _ToolTipWidgetState extends State<ToolTipWidget>
     }
 
     if (widget.container == null) {
-      return Positioned(
+      final defaultToolTipWidget = Positioned(
         top: contentY,
         left: _getLeft(),
         right: _getRight(),
@@ -491,8 +494,22 @@ class _ToolTipWidgetState extends State<ToolTipWidget>
           ),
         ),
       );
+
+      if (widget.floatingActionWidget != null) {
+        return Stack(
+          fit: StackFit.expand,
+          children: [
+            defaultToolTipWidget,
+            widget.floatingActionWidget!,
+          ],
+        );
+      } else {
+        return defaultToolTipWidget;
+      }
     }
+
     return Stack(
+      fit: StackFit.expand,
       children: <Widget>[
         Positioned(
           left: _getSpace(),
@@ -529,6 +546,7 @@ class _ToolTipWidgetState extends State<ToolTipWidget>
             ),
           ),
         ),
+        if (widget.floatingActionWidget != null) widget.floatingActionWidget!,
       ],
     );
   }

lib/src/widget/floating_action_widget.dart

@@ -0,0 +1,134 @@
+import 'package:flutter/material.dart';
+
+class FloatingActionWidget extends StatelessWidget {
+  const FloatingActionWidget({
+    super.key,
+    required this.child,
+    this.right,
+    this.width,
+    this.height,
+    this.left,
+    this.bottom,
+    this.top,
+  });
+
+  /// This is same as the Positioned.directional widget
+  /// Creates a widget that controls where a child of a [Stack] is positioned.
+  ///
+  /// Only two out of the three horizontal values (`start`, `end`,
+  /// [width]), and only two out of the three vertical values ([top],
+  /// [bottom], [height]), can be set. In each case, at least one of
+  /// the three must be null.
+  ///
+  /// If `textDirection` is [TextDirection.rtl], then the `start` argument is
+  /// used for the [right] property and the `end` argument is used for the
+  /// [left] property. Otherwise, if `textDirection` is [TextDirection.ltr],
+  /// then the `start` argument is used for the [left] property and the `end`
+  /// argument is used for the [right] property.
+  factory FloatingActionWidget.directional({
+    Key? key,
+    required TextDirection textDirection,
+    required Widget child,
+    double? start,
+    double? top,
+    double? end,
+    double? bottom,
+    double? width,
+    double? height,
+  }) {
+    double? left;
+    double? right;
+    switch (textDirection) {
+      case TextDirection.rtl:
+        left = end;
+        right = start;
+        break;
+      case TextDirection.ltr:
+        left = start;
+        right = end;
+    }
+    return FloatingActionWidget(
+      key: key,
+      left: left,
+      top: top,
+      right: right,
+      bottom: bottom,
+      width: width,
+      height: height,
+      child: child,
+    );
+  }
+
+  /// The widget below this widget in the tree.
+  ///
+  /// {@macro flutter.widgets.ProxyWidget.child}
+  final Widget child;
+
+  /// The distance that the child's left edge is inset from the left of the stack.
+  ///
+  /// Only two out of the three horizontal values ([left], [right], [width]) can be
+  /// set. The third must be null.
+  ///
+  /// If all three are null, the [Stack.alignment] is used to position the child
+  /// horizontally.
+  final double? left;
+
+  /// The distance that the child's top edge is inset from the top of the stack.
+  ///
+  /// Only two out of the three vertical values ([top], [bottom], [height]) can be
+  /// set. The third must be null.
+  ///
+  /// If all three are null, the [Stack.alignment] is used to position the child
+  /// vertically.
+  final double? top;
+
+  /// The distance that the child's right edge is inset from the right of the stack.
+  ///
+  /// Only two out of the three horizontal values ([left], [right], [width]) can be
+  /// set. The third must be null.
+  ///
+  /// If all three are null, the [Stack.alignment] is used to position the child
+  /// horizontally.
+  final double? right;
+
+  /// The distance that the child's bottom edge is inset from the bottom of the stack.
+  ///
+  /// Only two out of the three vertical values ([top], [bottom], [height]) can be
+  /// set. The third must be null.
+  ///
+  /// If all three are null, the [Stack.alignment] is used to position the child
+  /// vertically.
+  final double? bottom;
+
+  /// The child's width.
+  ///
+  /// Only two out of the three horizontal values ([left], [right], [width]) can be
+  /// set. The third must be null.
+  ///
+  /// If all three are null, the [Stack.alignment] is used to position the child
+  /// horizontally.
+  final double? width;
+
+  /// The child's height.
+  ///
+  /// Only two out of the three vertical values ([top], [bottom], [height]) can be
+  /// set. The third must be null.
+  ///
+  /// If all three are null, the [Stack.alignment] is used to position the child
+  /// vertically.
+  final double? height;
+
+  @override
+  Widget build(BuildContext context) {
+    return Positioned(
+      key: key,
+      left: left,
+      top: top,
+      right: right,
+      bottom: bottom,
+      width: width,
+      height: height,
+      child: child,
+    );
+  }
+}