Merge pull request #29 from solid-software/feature/overlay

fix #8

Author: solid-danylosafonov

example/lib/storybook/stories/help_widget_story.dart

@@ -4,17 +4,61 @@ import 'package:widgetbook/widgetbook.dart';
 
 final _backgroundColor = Colors.grey.withOpacity(0.5);
 
+/// Test height.
+const testHeight = 420.0;
+
+/// Test width
+const testWidth = 420.0;
+
+const _listLength = 100;
+
 /// Definition of using 4 different widget inherited from [HelpWidget].
 WidgetbookComponent get helpWidgetStory => WidgetbookComponent(
       name: 'HelpWidget',
       useCases: [
         WidgetbookUseCase(
           name: 'First',
           builder: (context) {
+            final alignmentX = context.knobs.slider(
+              label: 'Alignment on x Axis',
+              initialValue: -1,
+              min: -1,
+              max: 1,
+            );
+
+            final alignmentY = context.knobs.slider(
+              label: 'Alignment on y Axis',
+              initialValue: -1,
+              min: -1,
+              max: 1,
+            );
+
+            final _alignment = Alignment(alignmentX, alignmentY);
+
             return Container(
               alignment: Alignment.center,
               color: _backgroundColor,
-              child: HorizontalHelpWidget(),
+              child: CardRounded(
+                padding: EdgeInsets.zero,
+                backgroundColor: Colors.black,
+                height: testHeight,
+                width: testWidth,
+                child: OverlayWidget(
+                  alignment: _alignment,
+                  overlayWidget: HorizontalHelpWidget(),
+                  child: ListView(
+                    children: List.generate(
+                      _listLength,
+                      (i) => Text(
+                        i.toString(),
+                        style: const TextStyle(
+                          color: Colors.white,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
             );
           },
         ),

lib/src/components/card_rounded/card_rounded.dart

@@ -50,7 +50,7 @@ class CardRounded extends StatelessWidget {
     this.width,
     this.onClose,
     this.closeButtonIcon,
-    this.closeButtonAlignment = const Alignment(1, -1.05),
+    this.closeButtonAlignment = const Alignment(1.04, -1.05),
     this.padding = const EdgeInsets.symmetric(
       vertical: 10,
       horizontal: 10,

lib/src/widgets/help_collection/horizontal_help_widget.dart

@@ -28,11 +28,14 @@ class HorizontalHelpWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return HelpWidget(
       controller: _controller,
-      optionsView: CardRounded(
-        padding: const EdgeInsets.only(right: 3, left: 3, bottom: 12, top: 6),
-        child: LinksCardWidget(
-          options: defaultOptionsList,
-          onClose: _controller.goBack,
+      optionsView: Container(
+        constraints: const BoxConstraints.tightFor(width: 340),
+        child: CardRounded(
+          padding: const EdgeInsets.only(right: 3, left: 3, bottom: 12, top: 6),
+          child: LinksCardWidget(
+            options: defaultOptionsList,
+            onClose: _controller.goBack,
+          ),
         ),
       ),
       mainView: CardRounded(
@@ -77,7 +80,6 @@ class HorizontalHelpWidget extends StatelessWidget {
         onTap: _controller.goForward,
         child: const FlagCard(),
       ),
-      constraints: const BoxConstraints.tightFor(width: 366),
     );
   }
 }

lib/src/widgets/help_widget/help_widget.dart

@@ -24,9 +24,6 @@ class HelpWidget extends StatelessWidget {
 
   final TraverseController<HelpWidgetView> _controller;
 
-  /// It's a parameter that defines the allowed size of the widget.
-  final BoxConstraints? constraints;
-
   ///Constructor
   const HelpWidget({
     Key? key,
@@ -35,7 +32,6 @@ class HelpWidget extends StatelessWidget {
     required this.mainView,
     required TraverseController<HelpWidgetView> controller,
     this.axis = Axis.vertical,
-    this.constraints,
   })  : _controller = controller,
         super(key: key);
 
@@ -47,23 +43,20 @@ class HelpWidget extends StatelessWidget {
       HelpWidgetView.options: optionsView,
     };
 
-    return Container(
-      constraints: constraints,
-      child: AnimatedBuilder(
-        animation: _controller,
-        builder: (context, _) {
-          final view = _controller.currentItem;
-
-          return AnimatedViewTransition(
-            axis: axis,
-            transitionForward: _controller.didTraverseForward,
-            child: SizedBox(
-              key: ValueKey(view),
-              child: viewMap[view],
-            ),
-          );
-        },
-      ),
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, _) {
+        final view = _controller.currentItem;
+
+        return AnimatedViewTransition(
+          axis: axis,
+          transitionForward: _controller.didTraverseForward,
+          child: SizedBox(
+            key: ValueKey(view),
+            child: viewMap[view],
+          ),
+        );
+      },
     );
   }
 }

lib/src/widgets/overlay_widget/overlay_widget.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+
+/// [OverlayWidget] need to drop in the widget to predefined location on screen.
+class OverlayWidget extends StatelessWidget {
+  /// Child widget.
+  final Widget child;
+
+  /// Overlay widget.
+  final Widget overlayWidget;
+
+  /// Alignment.
+  final Alignment alignment;
+
+  /// Constructor.
+  const OverlayWidget({
+    Key? key,
+    required this.child,
+    required this.overlayWidget,
+    required this.alignment,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        child,
+        Align(
+          alignment: alignment,
+          child: overlayWidget,
+        ),
+      ],
+    );
+  }
+}

lib/src/widgets/widgets.dart

@@ -1,4 +1,5 @@
 export 'help_collection/help_collection.dart';
 export 'help_widget/help_widget.dart';
 export 'links_card_widget/links_card_widget.dart';
+export 'overlay_widget/overlay_widget.dart';
 export 'ukraine_flag_widget.dart';