feat: ✨ Global floating action widget

related:
feat: ✨Add staticContainer into ToolTipWidget for a custom tooltip that can be placed anywhere on screen and is not affected by the animation
SimformSolutionsPvtLtd#396

feat: ✨Add staticContainer into ToolTipWidget for a custom tooltip that can be placed anywhere on screen and is not affected by the animation
MichaelCadavillo@c1eb606

Author: thanhle1547

example/android/app/build.gradle

@@ -26,7 +26,7 @@ apply plugin: 'kotlin-android'
 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
 
 android {
-    compileSdkVersion 33
+    compileSdkVersion 34
 
     sourceSets {
         main.java.srcDirs += 'src/main/kotlin'
@@ -38,7 +38,7 @@ android {
 
     defaultConfig {
         applicationId "com.simform.example"
-        minSdkVersion 16
+        minSdkVersion flutter.minSdkVersion
         targetSdkVersion 33
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName

example/lib/main.dart

@@ -6,6 +6,12 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:showcaseview/showcaseview.dart';
 
+/// Global key for the first showcase widget
+final GlobalKey _firstShowcaseWidget = GlobalKey();
+
+/// Global key for the last showcase widget
+final GlobalKey _lastShowcaseWidget = GlobalKey();
+
 void main() => runApp(const MyApp());
 
 class MyApp extends StatelessWidget {
@@ -21,6 +27,27 @@ class MyApp extends StatelessWidget {
       debugShowCheckedModeBanner: false,
       home: Scaffold(
         body: ShowCaseWidget(
+          hideFloatingActionWidgetForShowcase: [_lastShowcaseWidget],
+          globalFloatingActionWidget: (showcaseContext) => Positioned(
+            left: 16,
+            bottom: 16,
+            child: Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: ElevatedButton(
+                onPressed: ShowCaseWidget.of(showcaseContext).dismiss,
+                style: ElevatedButton.styleFrom(
+                  backgroundColor: const Color(0xffEE5366),
+                ),
+                child: const Text(
+                  'Skip',
+                  style: TextStyle(
+                    color: Colors.white,
+                    fontSize: 15,
+                  ),
+                ),
+              ),
+            ),
+          ),
           onStart: (index, key) {
             log('onStart: $index, $key');
           },
@@ -53,11 +80,9 @@ class MailPage extends StatefulWidget {
 
 class _MailPageState extends State<MailPage> {
   final GlobalKey _searchKey = GlobalKey();
-  final GlobalKey _one = GlobalKey();
   final GlobalKey _two = GlobalKey();
   final GlobalKey _three = GlobalKey();
   final GlobalKey _four = GlobalKey();
-  final GlobalKey _five = GlobalKey();
   List<Mail> mails = [];
 
   final scrollController = ScrollController();
@@ -69,7 +94,9 @@ class _MailPageState extends State<MailPage> {
     //NOTE: remove ambiguate function if you are using
     //flutter version greater than 3.x and direct use WidgetsBinding.instance
     ambiguate(WidgetsBinding.instance)?.addPostFrameCallback(
-      (_) => ShowCaseWidget.of(context).startShowCase([_one, _two, _three, _four, _five]),
+      (_) => ShowCaseWidget.of(context).startShowCase(
+        [_firstShowcaseWidget, _two, _three, _four, _lastShowcaseWidget],
+      ),
     );
     mails = [
       Mail(
@@ -180,15 +207,25 @@ class _MailPageState extends State<MailPage> {
                                 child: Row(
                                   children: <Widget>[
                                     Showcase(
-                                      key: _one,
+                                      key: _firstShowcaseWidget,
                                       description: 'Tap ≡ to see menu options',
                                       disableDefaultTargetGestures: true,
                                       visibleBoundReference: _searchKey,
                                       arrowVerticalMargin: EdgeInsets.only(
                                         top: 22 * MediaQuery.textScaleFactorOf(context),
                                         bottom: 27,
                                       ),
-                                      onBarrierClick: () => debugPrint('Barrier clicked'),
+                                      onBarrierClick: () {
+                                        debugPrint('Barrier clicked');
+                                        debugPrint(
+                                          'Floating Action widget for first '
+                                          'showcase is now hidden',
+                                        );
+                                        ShowCaseWidget.of(context).hideFloatingActionWidgetForKeys([
+                                          _firstShowcaseWidget,
+                                          _lastShowcaseWidget
+                                        ]);
+                                      },
                                       child: GestureDetector(
                                         onTap: () => debugPrint('menu button clicked'),
                                         child: Icon(
@@ -229,6 +266,26 @@ 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: Positioned(
+                        left: 16,
+                        bottom: 16,
+                        child: Padding(
+                          padding: const EdgeInsets.all(16.0),
+                          child: ElevatedButton(
+                            style: ElevatedButton.styleFrom(
+                              backgroundColor: const Color(0xffEE5366),
+                            ),
+                            onPressed: ShowCaseWidget.of(context).dismiss,
+                            child: const Text(
+                              'Close Showcase',
+                              style: TextStyle(
+                                color: Colors.white,
+                                fontSize: 15,
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
                       targetShapeBorder: const CircleBorder(),
                       child: Container(
                         padding: const EdgeInsets.all(5),
@@ -281,7 +338,7 @@ class _MailPageState extends State<MailPage> {
         ),
       ),
       floatingActionButton: Showcase(
-        key: _five,
+        key: _lastShowcaseWidget,
         title: 'Compose Mail',
         description: 'Click here to compose mail',
         targetShapeBorder: const CircleBorder(),
@@ -295,7 +352,13 @@ class _MailPageState extends State<MailPage> {
                * currently rendered so the showcased keys are available in the
                * render tree. */
               scrollController.jumpTo(0);
-              ShowCaseWidget.of(context).startShowCase([_one, _two, _three, _four, _five]);
+              ShowCaseWidget.of(context).startShowCase([
+                _firstShowcaseWidget,
+                _two,
+                _three,
+                _four,
+                _lastShowcaseWidget,
+              ]);
             });
           },
           child: const Icon(
@@ -332,7 +395,7 @@ class _MailPageState extends State<MailPage> {
                 ),
               ).then((_) {
                 setState(() {
-                  ShowCaseWidget.of(context).startShowCase([_four, _five]);
+                  ShowCaseWidget.of(context).startShowCase([_four, _lastShowcaseWidget]);
                 });
               });
             },

lib/src/showcase.dart

@@ -106,7 +106,7 @@ class Showcase extends StatefulWidget {
   /// Typically a [Positioned] widget.
   ///
   /// It can be a button to dismiss the showcase.
-  final Widget? action;
+  final Widget? floatingActionWidget;
 
   /// Defines background color for tooltip widget.
   ///
@@ -286,7 +286,7 @@ class Showcase extends StatefulWidget {
     this.showArrow = true,
     EdgeInsets? arrowVerticalMargin,
     this.arrowPainterBuilder,
-    this.action,
+    this.floatingActionWidget,
     this.onTargetClick,
     this.disposeOnTap,
     this.movingAnimationDuration = const Duration(milliseconds: 2000),
@@ -330,7 +330,7 @@ class Showcase extends StatefulWidget {
     required this.height,
     required this.width,
     required this.container,
-    this.action,
+    this.floatingActionWidget,
     this.alignedFromParent = const EdgeInsets.only(
       left: 16,
       right: 8,
@@ -569,6 +569,9 @@ class _ShowcaseState extends State<Showcase> with WidgetsBindingObserver {
 
     if (!_showShowCase) return const Offstage();
 
+    final Widget? floatingActionWidget = widget.floatingActionWidget
+        ?? showCaseWidgetState.globalFloatingActionWidget?.call(context);
+
     return Stack(
       children: [
         GestureDetector(
@@ -653,7 +656,7 @@ class _ShowcaseState extends State<Showcase> with WidgetsBindingObserver {
             titleTextDirection: widget.titleTextDirection,
             descriptionTextDirection: widget.descriptionTextDirection,
           ),
-          if (widget.action != null) widget.action!,
+          if (floatingActionWidget != null) floatingActionWidget,
         ],
       ],
     );

lib/src/showcase_widget.dart

@@ -25,6 +25,10 @@ import 'package:flutter/material.dart';
 import '../showcaseview.dart';
 import 'extension.dart';
 
+typedef FloatingActionBuilderCallback = Widget Function(
+  BuildContext,
+);
+
 class ShowCaseWidget extends StatefulWidget {
   final Builder builder;
 
@@ -84,6 +88,17 @@ class ShowCaseWidget extends StatefulWidget {
   /// Enable/disable showcase globally. Enabled by default.
   final bool enableShowcase;
 
+  /// Custom static floating action widget to show a static widget anywhere
+  /// on the screen for all the showcase widget
+  /// Use this context to access showcaseWidget operation otherwise it will
+  /// throw error.
+  final FloatingActionBuilderCallback? globalFloatingActionWidget;
+
+  /// Hides [globalFloatingActionWidget] for the provided showcase widgets. Add key of
+  /// showcase in which [globalFloatingActionWidget] should be hidden this list.
+  /// Defaults to [].
+  final List<GlobalKey> hideFloatingActionWidgetForShowcase;
+
   const ShowCaseWidget({
     required this.builder,
     this.onFinish,
@@ -99,6 +114,8 @@ class ShowCaseWidget extends StatefulWidget {
     this.enableAutoScroll = false,
     this.disableBarrierInteraction = false,
     this.enableShowcase = true,
+    this.globalFloatingActionWidget,
+    this.hideFloatingActionWidgetForShowcase = const [],
   });
 
   static GlobalKey? activeTargetWidget(BuildContext context) {
@@ -146,9 +163,36 @@ class ShowCaseWidgetState extends State<ShowCaseWidget> {
 
   bool get enableShowcase => widget.enableShowcase;
 
+  List<GlobalKey> get hiddenFloatingActionKeys =>
+      _hideFloatingWidgetKeys.keys.toList();
+
+  /// This Stores keys of showcase for which we will hide the
+  /// [globalFloatingActionWidget].
+  late final _hideFloatingWidgetKeys = {
+    for (final item in widget.hideFloatingActionWidgetForShowcase) item: true
+  };
+
   /// Returns value of [ShowCaseWidget.blurValue]
   double get blurValue => widget.blurValue;
 
+  /// Returns current active showcase key
+  GlobalKey? get getCurrentActiveShowcaseKey {
+    if (ids == null || activeWidgetId == null) return null;
+
+    if (activeWidgetId! < ids!.length && activeWidgetId! >= 0) {
+      return ids![activeWidgetId!];
+    } else {
+      return null;
+    }
+  }
+
+  /// Return a [widget.globalFloatingActionWidget] if not need to hide this for
+  /// current showcase.
+  FloatingActionBuilderCallback? get globalFloatingActionWidget =>
+      _hideFloatingWidgetKeys[getCurrentActiveShowcaseKey] ?? false
+          ? null
+          : widget.globalFloatingActionWidget;
+
   @override
   void initState() {
     super.initState();
@@ -273,6 +317,15 @@ class ShowCaseWidgetState extends State<ShowCaseWidget> {
     activeWidgetId = null;
   }
 
+  /// Disables the [globalFloatingActionWidget] for the provided keys.
+  void hideFloatingActionWidgetForKeys(
+    List<GlobalKey> updatedList,
+  ) {
+    _hideFloatingWidgetKeys
+      ..clear()
+      ..addAll({for (final item in updatedList) item: true});
+  }
+
   @override
   Widget build(BuildContext context) {
     return _InheritedShowCaseView(