From 47a4567a3d6fad03968cb08f4754a6a44a32ed0e Mon Sep 17 00:00:00 2001 From: Serik Uvaissov Date: Thu, 16 Jul 2020 21:01:26 +0600 Subject: [PATCH] ui fixes button and wrap ui --- lib/views/check/image_show_container.dart | 30 +++--- lib/views/home/tabs/AdditionalTab.dart | 31 ++++--- .../fields/aman_icon_button_horizontal.dart | 33 +++++-- lib/widgets/fields/busy_button.dart | 66 +++++-------- lib/widgets/fields/busy_button_icon.dart | 93 +++++++++++++++++++ 5 files changed, 175 insertions(+), 78 deletions(-) create mode 100644 lib/widgets/fields/busy_button_icon.dart diff --git a/lib/views/check/image_show_container.dart b/lib/views/check/image_show_container.dart index ddad8e3..bcee7e8 100644 --- a/lib/views/check/image_show_container.dart +++ b/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 { ]), height: 260, child: Column( - children: [ + children: [ verticalSpaceSmall, - BusyButton( + BusyButtonIcon( title: 'WhatsApp', onPressed: callWhatsApp, mainColor: greenColor, @@ -91,9 +92,15 @@ class _MyFloatingActionButtonState extends State { 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 { } 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: 'Номер телефона', - cancelTitle: 'Отмена', - confirmationTitle: 'Отправить', - formatType: 'phone' - ); + description: 'Номер телефона', + cancelTitle: 'Отмена', + confirmationTitle: 'Отправить', + formatType: 'phone'); if (response.confirmed) { String phoneNumber = response.responseText; String msg = "Спасибо за покупку! \r\n ${widget.data.url} "; diff --git a/lib/views/home/tabs/AdditionalTab.dart b/lib/views/home/tabs/AdditionalTab.dart index 6683efa..aeeb3d1 100644 --- a/lib/views/home/tabs/AdditionalTab.dart +++ b/lib/views/home/tabs/AdditionalTab.dart @@ -215,7 +215,11 @@ class _AdditionalTabState extends State { child: ListView( children: [ 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( converter: (store) => store.state.settingState, builder: (context, vm) { @@ -300,9 +304,12 @@ class _AdditionalTabState extends State { )), ), verticalSpaceMedium, - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - crossAxisAlignment: CrossAxisAlignment.start, + Wrap( + //mainAxisAlignment: MainAxisAlignment.spaceEvenly, + //crossAxisAlignment: CrossAxisAlignment.start, + runAlignment: WrapAlignment.center, + alignment: WrapAlignment.spaceEvenly, + crossAxisAlignment: WrapCrossAlignment.start, children: [ AmanIconButton( title: 'Открыть смену', @@ -325,13 +332,6 @@ class _AdditionalTabState extends State { icon: MdiIcons.walletOutline, mainColor: primaryColor, ), - ], - ), - verticalSpaceTiny, - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ AmanIconButton( title: 'Х Отчет', onPressed: _xReport, @@ -358,11 +358,13 @@ class _AdditionalTabState extends State { ), 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: [ - Expanded( + Flexible( + flex: 1, child: BusyButton( title: 'Взнос наличных', onPressed: _deposit, @@ -370,7 +372,8 @@ class _AdditionalTabState extends State { ), ), horizontalSpaceSmall, - Expanded( + Flexible( + flex: 1, child: BusyButton( title: 'Снятие наличных', onPressed: _withdrawal, diff --git a/lib/widgets/fields/aman_icon_button_horizontal.dart b/lib/widgets/fields/aman_icon_button_horizontal.dart index 937923b..0439709 100644 --- a/lib/widgets/fields/aman_icon_button_horizontal.dart +++ b/lib/widgets/fields/aman_icon_button_horizontal.dart @@ -33,16 +33,29 @@ class _AmanIconButtonHorizontalState extends State { child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - Icon(widget.icon, - color: widget.selected - ? widget.activeColor - : widget.inactiveColor), - AutoSizeText(widget.title, - style: TextStyle( - color: widget.selected - ? widget.activeColor - : widget.inactiveColor, - fontWeight: FontWeight.w800)) + Flexible( + fit: FlexFit.loose, + flex: 1, + child: Icon(widget.icon, + color: widget.selected + ? widget.activeColor + : widget.inactiveColor), + ), + SizedBox( + 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)), + ) ], ), ), diff --git a/lib/widgets/fields/busy_button.dart b/lib/widgets/fields/busy_button.dart index 8daa16c..d3c879a 100644 --- a/lib/widgets/fields/busy_button.dart +++ b/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( - {@required this.title, - this.busy = false, - @required this.onPressed, - this.enabled = true, - this.mainColor, - this.icon}); + const BusyButton({ + @required this.title, + this.busy = false, + @required this.onPressed, + this.enabled = true, + this.mainColor, + }); @override _BusyButtonState createState() => _BusyButtonState(); @@ -49,41 +48,22 @@ class _BusyButtonState extends State { //horizontal: widget.busy ? 10 : 10, //vertical: widget.busy ? 10 : 10 ), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - !widget.busy - ? Expanded( - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - widget.icon != null - ? Container( - child: (Icon( - widget.icon, - color: whiteColor, - )), - margin: const EdgeInsets.only(right: 10.0), - ) - : (Container()), - AutoSizeText( - widget.title, - textAlign: TextAlign.center, - style: buttonTitleTextStyle, - ), - ], - ), - ) - : SizedBox( - width: 30, - height: 30, - child: CircularProgressIndicator( - strokeWidth: 2, - valueColor: - AlwaysStoppedAnimation(Colors.white)), - ), - ], - ), + child: !widget.busy + ? AutoSizeText( + widget.title, + textAlign: TextAlign.center, + style: buttonTitleTextStyle, + minFontSize: 2, + maxLines: 1, + ) + : SizedBox( + width: 30, + height: 30, + child: CircularProgressIndicator( + strokeWidth: 2, + valueColor: + AlwaysStoppedAnimation(Colors.white)), + ), ), ), ), diff --git a/lib/widgets/fields/busy_button_icon.dart b/lib/widgets/fields/busy_button_icon.dart new file mode 100644 index 0000000..57433ac --- /dev/null +++ b/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 { + @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.busy + ? Expanded( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + 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(Colors.white)), + ), + ], + ), + ), + ), + ), + ); + } +}