ui fixes button and wrap ui

lib/views/check/image_show_container.dart

@@ -8,6 +8,7 @@ import 'package:aman_kassa_flutter/core/services/navigator_service.dart';
 import 'package:aman_kassa_flutter/shared/app_colors.dart';
 import 'package:aman_kassa_flutter/shared/ui_helpers.dart';
 import 'package:aman_kassa_flutter/widgets/fields/busy_button.dart';
+import 'package:aman_kassa_flutter/widgets/fields/busy_button_icon.dart';
 import 'package:flutter/material.dart';
 import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
 import 'package:esys_flutter_share/esys_flutter_share.dart';
@@ -45,7 +46,7 @@ class ImageShowModel {
   final String title;
   final String url;
 
-  ImageShowModel({ this.data, this.title, this.url});
+  ImageShowModel({this.data, this.title, this.url});
 }
 
 class MyFloatingActionButton extends StatefulWidget {
@@ -81,9 +82,9 @@ class _MyFloatingActionButtonState extends State<MyFloatingActionButton> {
                           ]),
                       height: 260,
                       child: Column(
-                        children: <Widget>[                          
+                        children: <Widget>[
                           verticalSpaceSmall,
-                          BusyButton(
+                          BusyButtonIcon(
                             title: 'WhatsApp',
                             onPressed: callWhatsApp,
                             mainColor: greenColor,
@@ -91,9 +92,15 @@ class _MyFloatingActionButtonState extends State<MyFloatingActionButton> {
                             enabled: widget.data.url != null,
                           ),
                           verticalSpaceSmall,
-                          BusyButton(title: 'QR-код чека', onPressed: qrGenerate , mainColor: primaryColor, icon: MdiIcons.qrcode, enabled: widget.data.url != null, ),
+                          BusyButtonIcon(
+                            title: 'QR-код чека',
+                            onPressed: qrGenerate,
+                            mainColor: primaryColor,
+                            icon: MdiIcons.qrcode,
+                            enabled: widget.data.url != null,
+                          ),
                           verticalSpaceSmall,
-                          BusyButton(
+                          BusyButtonIcon(
                             title: 'Поделиться',
                             onPressed: shareFile,
                             mainColor: yellowColor,
@@ -120,16 +127,17 @@ class _MyFloatingActionButtonState extends State<MyFloatingActionButton> {
   }
 
   void qrGenerate() async {
-    _navigatorService.push(QrViewRoute, arguments: ImageShowModel(data: widget.data.url, title: 'Спасибо за покупку'));
+    _navigatorService.push(QrViewRoute,
+        arguments:
+            ImageShowModel(data: widget.data.url, title: 'Спасибо за покупку'));
   }
 
   void callWhatsApp() async {
     DialogResponse response = await _dialog.showConfirmationDialogInput(
-      description: 'Номер телефона',
+        description: 'Номер телефона',
-      cancelTitle: 'Отмена',
+        cancelTitle: 'Отмена',
-      confirmationTitle: 'Отправить',
+        confirmationTitle: 'Отправить',
-      formatType: 'phone'
+        formatType: 'phone');
-    );
     if (response.confirmed) {
       String phoneNumber = response.responseText;
       String msg = "Спасибо за покупку! \r\n ${widget.data.url} ";

lib/views/home/tabs/AdditionalTab.dart

@@ -215,7 +215,11 @@ class _AdditionalTabState extends State<AdditionalTab> {
       child: ListView(
         children: <Widget>[
           Padding(
-            padding: const EdgeInsets.only(top: 10.0, left: 20.0, right: 20.0),
+            padding: const EdgeInsets.only(
+              top: 10.0,
+              left: 20.0,
+              right: 20.0,
+            ),
             child: StoreConnector<AppState, SettingState>(
                 converter: (store) => store.state.settingState,
                 builder: (context, vm) {
@@ -300,9 +304,12 @@ class _AdditionalTabState extends State<AdditionalTab> {
             )),
           ),
           verticalSpaceMedium,
-          Row(
+          Wrap(
-            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-            crossAxisAlignment: CrossAxisAlignment.start,
+            //crossAxisAlignment: CrossAxisAlignment.start,
+            runAlignment: WrapAlignment.center,
+            alignment: WrapAlignment.spaceEvenly,
+            crossAxisAlignment: WrapCrossAlignment.start,
             children: <Widget>[
               AmanIconButton(
                 title: 'Открыть смену',
@@ -325,13 +332,6 @@ class _AdditionalTabState extends State<AdditionalTab> {
                 icon: MdiIcons.walletOutline,
                 mainColor: primaryColor,
               ),
-            ],
-          ),
-          verticalSpaceTiny,
-          Row(
-            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: <Widget>[
               AmanIconButton(
                 title: 'Х Отчет',
                 onPressed: _xReport,
@@ -358,11 +358,13 @@ class _AdditionalTabState extends State<AdditionalTab> {
           ),
           verticalSpaceMedium,
           Container(
-            margin: const EdgeInsets.symmetric(horizontal: 20.0),
+            margin:
+                const EdgeInsets.only(left: 20.0, right: 20.0, bottom: 20.0),
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: <Widget>[
-                Expanded(
+                Flexible(
+                  flex: 1,
                   child: BusyButton(
                     title: 'Взнос наличных',
                     onPressed: _deposit,
@@ -370,7 +372,8 @@ class _AdditionalTabState extends State<AdditionalTab> {
                   ),
                 ),
                 horizontalSpaceSmall,
-                Expanded(
+                Flexible(
+                  flex: 1,
                   child: BusyButton(
                     title: 'Снятие наличных',
                     onPressed: _withdrawal,

lib/widgets/fields/aman_icon_button_horizontal.dart

@@ -33,16 +33,29 @@ class _AmanIconButtonHorizontalState extends State<AmanIconButtonHorizontal> {
         child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
-            Icon(widget.icon,   
+            Flexible(
-                color: widget.selected
+              fit: FlexFit.loose,
-                    ? widget.activeColor
+              flex: 1,
-                    : widget.inactiveColor),
+              child: Icon(widget.icon,
-            AutoSizeText(widget.title,
+                  color: widget.selected
-                style: TextStyle(
+                      ? widget.activeColor
-                    color: widget.selected
+                      : widget.inactiveColor),
-                        ? widget.activeColor
+            ),
-                        : widget.inactiveColor,
+            SizedBox(
-                    fontWeight: FontWeight.w800))
+              width: 5,
+            ),
+            Flexible(
+              fit: FlexFit.loose,
+              flex: 5,
+              child: AutoSizeText(widget.title,
+                  maxLines: 1,
+                  //         textAlign: TextAlign.center,
+                  style: TextStyle(
+                      color: widget.selected
+                          ? widget.activeColor
+                          : widget.inactiveColor,
+                      fontWeight: FontWeight.w800)),
+            )
           ],
         ),
       ),

lib/widgets/fields/busy_button.dart

@@ -10,15 +10,14 @@ class BusyButton extends StatefulWidget {
   final Function onPressed;
   final bool enabled;
   final Color mainColor;
-  final IconData icon;
 
-  const BusyButton(
+  const BusyButton({
-      {@required this.title,
+    @required this.title,
-      this.busy = false,
+    this.busy = false,
-      @required this.onPressed,
+    @required this.onPressed,
-      this.enabled = true,
+    this.enabled = true,
-      this.mainColor,
+    this.mainColor,
-      this.icon});
+  });
 
   @override
   _BusyButtonState createState() => _BusyButtonState();
@@ -49,41 +48,22 @@ class _BusyButtonState extends State<BusyButton> {
                 //horizontal: widget.busy ? 10 : 10,
                 //vertical: widget.busy ? 10 : 10
                 ),
-            child: Row(
+            child: !widget.busy
-              mainAxisAlignment: MainAxisAlignment.center,
+                ? AutoSizeText(
-              children: <Widget>[
+                    widget.title,
-                !widget.busy
+                    textAlign: TextAlign.center,
-                    ? Expanded(
+                    style: buttonTitleTextStyle,
-                        child: Row(
+                    minFontSize: 2,
-                          mainAxisAlignment: MainAxisAlignment.center,
+                    maxLines: 1,
-                          children: <Widget>[
+                  )
-                            widget.icon != null
+                : SizedBox(
-                                ? Container(
+                    width: 30,
-                                    child: (Icon(
+                    height: 30,
-                                      widget.icon,
+                    child: CircularProgressIndicator(
-                                      color: whiteColor,
+                        strokeWidth: 2,
-                                    )),
+                        valueColor:
-                                    margin: const EdgeInsets.only(right: 10.0),
+                            AlwaysStoppedAnimation<Color>(Colors.white)),
-                                  )
+                  ),
-                                : (Container()),
-                            AutoSizeText(
-                              widget.title,
-                              textAlign: TextAlign.center,
-                              style: buttonTitleTextStyle,
-                            ),
-                          ],
-                        ),
-                      )
-                    : SizedBox(
-                        width: 30,
-                        height: 30,
-                        child: CircularProgressIndicator(
-                            strokeWidth: 2,
-                            valueColor:
-                                AlwaysStoppedAnimation<Color>(Colors.white)),
-                      ),
-              ],
-            ),
           ),
         ),
       ),

lib/widgets/fields/busy_button_icon.dart

@@ -0,0 +1,93 @@
+import 'package:aman_kassa_flutter/shared/app_colors.dart';
+import 'package:aman_kassa_flutter/shared/shared_styles.dart';
+import 'package:auto_size_text/auto_size_text.dart';
+import 'package:flutter/material.dart';
+
+/// A button that shows a busy indicator in place of title
+class BusyButtonIcon extends StatefulWidget {
+  final bool busy;
+  final String title;
+  final Function onPressed;
+  final bool enabled;
+  final Color mainColor;
+  final IconData icon;
+
+  const BusyButtonIcon(
+      {@required this.title,
+      this.busy = false,
+      @required this.onPressed,
+      this.enabled = true,
+      this.mainColor,
+      this.icon});
+
+  @override
+  _BusyButtonIconState createState() => _BusyButtonIconState();
+}
+
+class _BusyButtonIconState extends State<BusyButtonIcon> {
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedContainer(
+      duration: const Duration(milliseconds: 300),
+      decoration: BoxDecoration(
+          color: widget.enabled
+              ? (widget.mainColor ?? primaryColor)
+              : widget.mainColor?.withOpacity(0.2) ??
+                  primaryColor.withOpacity(0.2),
+          borderRadius: BorderRadius.circular(7),
+          boxShadow: [cardShadowBox]),
+      child: Material(
+        type: MaterialType.transparency,
+        child: InkWell(
+          onTap: widget.busy || !widget.enabled ? null : widget.onPressed,
+          child: AnimatedContainer(
+            height: widget.busy ? 45 : 45,
+            //width: widget.busy ? 40 : 40,
+            duration: const Duration(milliseconds: 300),
+            alignment: Alignment.center,
+            margin: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0
+                //horizontal: widget.busy ? 10 : 10,
+                //vertical: widget.busy ? 10 : 10
+                ),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: <Widget>[
+                !widget.busy
+                    ? Expanded(
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: <Widget>[
+                            widget.icon != null
+                                ? Container(
+                                    child: (Icon(
+                                      widget.icon,
+                                      color: whiteColor,
+                                    )),
+                                    margin: const EdgeInsets.only(right: 10.0),
+                                  )
+                                : (Container()),
+                            Text(
+                              widget.title,
+                              textAlign: TextAlign.center,
+                              style: buttonTitleTextStyle,
+                              maxLines: 1,
+                            ),
+                          ],
+                        ),
+                      )
+                    : SizedBox(
+                        width: 30,
+                        height: 30,
+                        child: CircularProgressIndicator(
+                            strokeWidth: 2,
+                            valueColor:
+                                AlwaysStoppedAnimation<Color>(Colors.white)),
+                      ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}