CW-376-picker-ui-issue (#919)

* feat: use common modal widget for repeated picker logic and display

* refactor: rename widget

* refactor: clear wrapper logic from picker widget and move title to hasTitle

* Minor code readability enhancements [skip ci]

---------

Co-authored-by: OmarHatem <omarh.ismail1@gmail.com>

lib/src/screens/dashboard/widgets/filter_widget.dart

@@ -1,13 +1,9 @@
-import 'dart:ui';
-import 'package:cake_wallet/palette.dart';
 import 'package:cake_wallet/src/screens/dashboard/widgets/filter_tile.dart';
 import 'package:cake_wallet/src/widgets/section_divider.dart';
 import 'package:cake_wallet/src/widgets/standard_checkbox.dart';
 import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-import 'package:cake_wallet/src/widgets/alert_background.dart';
+import 'package:cake_wallet/src/widgets/picker_wrapper_widget.dart';
-import 'package:cake_wallet/src/widgets/alert_close_button.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 //import 'package:date_range_picker/date_range_picker.dart' as date_rage_picker;
@@ -20,26 +16,26 @@ class FilterWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     const sectionDivider = const SectionDivider();
-    return AlertBackground(
+    return PickerWrapperWidget(
-      child: Stack(
+      children: [
-        alignment: Alignment.center,
-        children: <Widget>[
-          Column(
-            mainAxisSize: MainAxisSize.min,
-            children: <Widget>[
         Padding(
           padding: EdgeInsets.only(left: 24, right: 24, top: 24),
           child: ClipRRect(
             borderRadius: BorderRadius.all(Radius.circular(24)),
             child: Container(
               color: Theme.of(context).textTheme!.bodyText1!.decorationColor!,
-                    child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+              child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
                     Padding(
                       padding: EdgeInsets.all(24.0),
                       child: Text(
                         S.of(context).filter_by,
                         style: TextStyle(
-                            color: Theme.of(context).primaryTextTheme.overline!.color!,
+                          color: Theme.of(context)
+                              .primaryTextTheme
+                              .overline!
+                              .color!,
                           fontSize: 16,
                           fontFamily: 'Lato',
                           decoration: TextDecoration.none,
@@ -54,17 +50,23 @@ class FilterWidget extends StatelessWidget {
                       itemCount: dashboardViewModel.filterItems.length,
                       separatorBuilder: (context, _) => sectionDivider,
                       itemBuilder: (_, index1) {
-                          final title = dashboardViewModel.filterItems.keys.elementAt(index1);
+                        final title = dashboardViewModel.filterItems.keys
-                          final section = dashboardViewModel.filterItems.values.elementAt(index1);
+                            .elementAt(index1);
+                        final section = dashboardViewModel.filterItems.values
+                            .elementAt(index1);
                         return Column(
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: <Widget>[
                             Padding(
-                                padding: EdgeInsets.only(top: 20, left: 24, right: 24),
+                              padding:
+                                  EdgeInsets.only(top: 20, left: 24, right: 24),
                               child: Text(
                                 title,
                                 style: TextStyle(
-                                      color: Theme.of(context).primaryTextTheme!.headline6!.color!,
+                                    color: Theme.of(context)
+                                        .primaryTextTheme!
+                                        .headline6!
+                                        .color!,
                                     fontSize: 16,
                                     fontFamily: 'Lato',
                                     fontWeight: FontWeight.bold,
@@ -83,9 +85,11 @@ class FilterWidget extends StatelessWidget {
                                           value: item.value(),
                                           caption: item.caption,
                                           gradientBackground: true,
-                                                borderColor: Theme.of(context).dividerColor,
+                                          borderColor:
+                                              Theme.of(context).dividerColor,
                                           iconColor: Colors.white,
-                                                onChanged: (value) => item.onChanged(),
+                                          onChanged: (value) =>
+                                              item.onChanged(),
                                         ));
                                 return FilterTile(child: content);
                               },
@@ -97,12 +101,8 @@ class FilterWidget extends StatelessWidget {
                   ]),
             ),
           ),
-              ),
+        )
       ],
-          ),
-          AlertCloseButton()
-        ],
-      ),
     );
   }
 }

lib/src/widgets/check_box_picker.dart

@@ -1,8 +1,7 @@
 import 'package:cake_wallet/palette.dart';
 import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:flutter/material.dart';
-import 'package:cake_wallet/src/widgets/alert_background.dart';
+import 'package:cake_wallet/src/widgets/picker_wrapper_widget.dart';
-import 'package:cake_wallet/src/widgets/alert_close_button.dart';
 
 class CheckBoxPicker extends StatefulWidget {
   CheckBoxPicker({
@@ -32,16 +31,8 @@ class CheckBoxPickerState extends State<CheckBoxPicker> {
 
   @override
   Widget build(BuildContext context) {
-    return AlertBackground(
+    return PickerWrapperWidget(
-      child: Column(
       children: [
-          Expanded(
-            child: Stack(
-              alignment: Alignment.center,
-              children: [
-                Column(
-                  mainAxisSize: MainAxisSize.min,
-                  children: <Widget>[
         if (widget.title.isNotEmpty)
           Container(
             padding: EdgeInsets.symmetric(horizontal: 24),
@@ -91,14 +82,6 @@ class CheckBoxPickerState extends State<CheckBoxPicker> {
           ),
         ),
       ],
-                ),
-                SizedBox(height: ResponsiveLayoutUtil.kPopupSpaceHeight),
-                AlertCloseButton(),
-              ],
-            ),
-          ),
-        ],
-      ),
     );
   }
 
@@ -111,7 +94,10 @@ class CheckBoxPickerState extends State<CheckBoxPicker> {
         shrinkWrap: true,
         separatorBuilder: (context, index) => widget.isSeparated
             ? Divider(
-                color: Theme.of(context).accentTextTheme.headline6!.backgroundColor!,
+                color: Theme.of(context)
+                    .accentTextTheme
+                    .headline6!
+                    .backgroundColor!,
                 height: 1,
               )
             : const SizedBox(),

lib/src/widgets/picker.dart

@@ -2,9 +2,8 @@
 
 import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:flutter/material.dart';
-import 'package:cake_wallet/src/widgets/alert_background.dart';
-import 'package:cake_wallet/src/widgets/alert_close_button.dart';
 import 'package:cw_core/currency.dart';
+import 'package:cake_wallet/src/widgets/picker_wrapper_widget.dart';
 
 class Picker<Item> extends StatefulWidget {
   Picker({
@@ -114,37 +113,16 @@ class _PickerState<Item> extends State<Picker<Item>> {
     final mq = MediaQuery.of(context);
     final bottom = mq.viewInsets.bottom;
     final height = mq.size.height - bottom;
-    final screenCenter = height / 2;
 
-    double closeButtonBottom = 60;
     double containerHeight = height * 0.65;
     if (bottom > 0) {
       // increase a bit or it gets too squished in the top
       containerHeight = height * 0.75;
-
-      final containerCenter = containerHeight / 2;
-      final containerBottom = screenCenter - containerCenter;
-
-      final hasTitle = widget.title == null || widget.title!.isEmpty;
-
-      // position the close button right below the search container
-      closeButtonBottom = closeButtonBottom -
-          containerBottom +
-          (hasTitle ? padding : padding / 1.5);
     }
 
-    return AlertBackground(
+    return PickerWrapperWidget(
-      child: Column(
+      hasTitle: widget.title?.isNotEmpty ?? false,
       children: [
-          Expanded(
-            flex: 1,
-            child: Stack(
-              alignment: Alignment.center,
-              children: <Widget>[
-                Column(
-                  mainAxisSize: MainAxisSize.min,
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: <Widget>[
         if (widget.title?.isNotEmpty ?? false)
           Container(
             padding: EdgeInsets.symmetric(horizontal: padding),
@@ -165,10 +143,7 @@ class _PickerState<Item> extends State<Picker<Item>> {
           child: ClipRRect(
             borderRadius: BorderRadius.all(Radius.circular(30)),
             child: Container(
-                          color: Theme.of(context)
+              color: Theme.of(context).accentTextTheme.headline6!.color!,
-                              .accentTextTheme
-                              .headline6!
-                              .color!,
               child: ConstrainedBox(
                 constraints: BoxConstraints(
                   maxHeight: containerHeight,
@@ -189,26 +164,23 @@ class _PickerState<Item> extends State<Picker<Item>> {
                                   .color!),
                           decoration: InputDecoration(
                             hintText: widget.hintText,
-                                        prefixIcon: Image.asset(
+                            prefixIcon:
-                                            "assets/images/search_icon.png"),
+                                Image.asset("assets/images/search_icon.png"),
                             filled: true,
                             fillColor: Theme.of(context)
                                 .accentTextTheme
                                 .headline3!
                                 .color!,
                             alignLabelWithHint: false,
-                                        contentPadding:
+                            contentPadding: const EdgeInsets.symmetric(
-                                            const EdgeInsets.symmetric(
                                 vertical: 4, horizontal: 16),
                             enabledBorder: OutlineInputBorder(
-                                            borderRadius:
+                                borderRadius: BorderRadius.circular(14),
-                                                BorderRadius.circular(14),
                                 borderSide: const BorderSide(
                                   color: Colors.transparent,
                                 )),
                             focusedBorder: OutlineInputBorder(
-                                            borderRadius:
+                                borderRadius: BorderRadius.circular(14),
-                                                BorderRadius.circular(14),
                                 borderSide: const BorderSide(
                                   color: Colors.transparent,
                                 )),
@@ -246,8 +218,7 @@ class _PickerState<Item> extends State<Picker<Item>> {
                                       fontSize: 12,
                                       fontWeight: FontWeight.w500,
                                       fontFamily: 'Lato',
-                                                  decoration:
+                                      decoration: TextDecoration.none,
-                                                      TextDecoration.none,
                                       color: Theme.of(context)
                                           .primaryTextTheme
                                           .headline6!
@@ -266,19 +237,6 @@ class _PickerState<Item> extends State<Picker<Item>> {
           ),
         )
       ],
-                ),
-                SizedBox(height: ResponsiveLayoutUtil.kPopupSpaceHeight),
-                AlertCloseButton(bottom: closeButtonBottom),
-              ],
-            ),
-          ),
-          // gives the extra spacing using MediaQuery.viewInsets.bottom
-          // to simulate a keyboard area
-          SizedBox(
-            height: bottom,
-          )
-        ],
-      ),
     );
   }
 

lib/src/widgets/picker_wrapper_widget.dart

@@ -0,0 +1,61 @@
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
+import 'package:flutter/material.dart';
+import 'package:cake_wallet/src/widgets/alert_background.dart';
+import 'package:cake_wallet/src/widgets/alert_close_button.dart';
+
+class PickerWrapperWidget extends StatelessWidget {
+  PickerWrapperWidget({required this.children, this.hasTitle = false});
+
+  final List<Widget> children;
+  final bool hasTitle;
+
+  @override
+  Widget build(BuildContext context) {
+    final double padding = 24;
+
+    final mq = MediaQuery.of(context);
+    final bottom = mq.viewInsets.bottom;
+    final height = mq.size.height - bottom;
+    final screenCenter = height / 2;
+
+    double closeButtonBottom = 60;
+    double containerHeight = height * 0.65;
+    if (bottom > 0) {
+      // increase a bit or it gets too squished in the top
+      containerHeight = height * 0.75;
+
+      final containerCenter = containerHeight / 2;
+      final containerBottom = screenCenter - containerCenter;
+
+      // position the close button right below the search container
+      closeButtonBottom = closeButtonBottom -
+          containerBottom + (!hasTitle ? padding : padding / 1.5);
+    }
+
+    return AlertBackground(
+      child: Column(
+        children: [
+          Expanded(
+            flex: 1,
+            child: Stack(
+              alignment: Alignment.center,
+              children: <Widget>[
+                Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: children,
+                ),
+                SizedBox(height: ResponsiveLayoutUtil.kPopupSpaceHeight),
+                AlertCloseButton(bottom: closeButtonBottom),
+              ],
+            ),
+          ),
+          // gives the extra spacing using MediaQuery.viewInsets.bottom
+          // to simulate a keyboard area
+          SizedBox(
+            height: bottom,
+          )
+        ],
+      ),
+    );
+  }
+}