simple overlay widget

Author: solid-danylosafonov

example/lib/storybook/stories/help_widget_story.dart

@@ -5,10 +5,13 @@ import 'package:widgetbook/widgetbook.dart';
 final _backgroundColor = Colors.grey.withOpacity(0.5);
 
 /// Test height.
-const testHeight = 1000.0;
+const testHeight = 420.0;
 
 /// Test width
-const testWidth = 600.0;
+const testWidth = 420.0;
+
+/// helpWidget alignment
+const _alignment = Alignment.bottomRight;
 
 /// Definition of using 4 different widget inherited from [HelpWidget].
 WidgetbookComponent get helpWidgetStory => WidgetbookComponent(
@@ -20,7 +23,24 @@ WidgetbookComponent get helpWidgetStory => WidgetbookComponent(
             return Container(
               alignment: Alignment.center,
               color: _backgroundColor,
-              child: HorizontalHelpWidget(),
+              child: CardRounded(
+                backgroundColor: Colors.black,
+                height: testHeight,
+                width: testWidth,
+                child: OverlayWidget(
+                  alignment: _alignment,
+                  overlayWidget: HorizontalHelpWidget(alignment: _alignment,),
+                  child: ListView(
+                    children: [
+                      for (var i = 0; i < 100; i++)
+                        Text(
+                          i.toString(),
+                          style: const TextStyle(color: Colors.white,),
+                        ),
+                    ],
+                  ),
+                ),
+              ),
             );
           },
         ),

lib/src/widgets/help_collection/horizontal_help_widget.dart

@@ -14,6 +14,10 @@ class HorizontalHelpWidget extends StatelessWidget {
   /// A description for the button that will be shown on the main card.
   final String detailsButtonDescription;
 
+  /// where to align this widget inside its container
+  /// (matters for collapsed view mostly)
+  final Alignment alignment;
+
   static const _defaultTitle = 'Stop Russian Aggression!';
   static const _defaultDetailsButtonDesc = 'See what you can do';
 
@@ -22,11 +26,13 @@ class HorizontalHelpWidget extends StatelessWidget {
     Key? key,
     this.title = _defaultTitle,
     this.detailsButtonDescription = _defaultDetailsButtonDesc,
+    this.alignment = Alignment.topLeft,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return HelpWidget(
+      alignment: alignment,
       controller: _controller,
       optionsView: CardRounded(
         padding: const EdgeInsets.only(right: 3, left: 3, bottom: 12, top: 6),

lib/src/widgets/help_widget/help_widget.dart

@@ -27,6 +27,10 @@ class HelpWidget extends StatelessWidget {
   /// It's a parameter that defines the allowed size of the widget.
   final BoxConstraints? constraints;
 
+  /// where to align this widget inside its container
+  /// (matters for collapsed view mostly)
+  final Alignment alignment;
+
   ///Constructor
   const HelpWidget({
     Key? key,
@@ -35,6 +39,7 @@ class HelpWidget extends StatelessWidget {
     required this.mainView,
     required TraverseController<HelpWidgetView> controller,
     this.axis = Axis.vertical,
+    this.alignment = Alignment.topLeft,
     this.constraints,
   })  : _controller = controller,
         super(key: key);
@@ -48,6 +53,7 @@ class HelpWidget extends StatelessWidget {
     };
 
     return Container(
+      alignment: alignment,
       constraints: constraints,
       child: AnimatedBuilder(
         animation: _controller,

lib/src/widgets/overlay_widget/overlay_widget.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 
 /// [OverlayWidget] need to drop in the widget to predefined location on screen.
-class OverlayWidget extends StatefulWidget {
+class OverlayWidget extends StatelessWidget {
   /// Child widget.
   final Widget child;
 
@@ -19,60 +19,16 @@ class OverlayWidget extends StatefulWidget {
     required this.alignment,
   }) : super(key: key);
 
-  @override
-  State<OverlayWidget> createState() => _OverlayWidgetState();
-}
-
-class _OverlayWidgetState extends State<OverlayWidget> {
-  bool _isVisible = true;
-  OverlayEntry? _overlay;
-  @override
-  void initState() {
-    super.initState();
-    final overlay = OverlayEntry(builder: (context) => widget.overlayWidget);
-    _overlay = overlay;
-    WidgetsBinding.instance.addPostFrameCallback((_) => _showOverlay(overlay));
-  }
-
   @override
   Widget build(BuildContext context) {
     return Stack(
       children: [
-        widget.child,
+        child,
         Align(
-          alignment: widget.alignment,
-          child: IconButton(
-            color: Colors.purple,
-            onPressed: _onTap,
-            icon: const Icon(Icons.chevron_right),
-          ),
-        )
+          alignment: alignment,
+          child: overlayWidget,
+        ),
       ],
     );
   }
-
-  void _onTap() {
-    _isVisible = !_isVisible;
-    _onVisibilityChanged(_isVisible);
-  }
-
-  void _onVisibilityChanged(bool visible) {
-    final overlay = _overlay;
-    if (overlay == null) return;
-    if (visible) {
-      _showOverlay(overlay);
-    } else {
-      overlay.remove();
-    }
-  }
-
-  void _showOverlay(OverlayEntry overlay) {
-    Overlay.of(context)?.insert(overlay);
-  }
-
-  @override
-  void dispose() {
-    _overlay?.dispose();
-    super.dispose();
-  }
 }