From 02fe3c008f932a5f98a25c8febace2de4eb7e0e5 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Tue, 14 Feb 2023 18:05:44 +0200 Subject: [PATCH] Constrain primary Buttons width --- lib/src/screens/exchange/exchange_page.dart | 115 +++++----- lib/src/screens/send/send_page.dart | 147 ++++++------- lib/src/widgets/primary_button.dart | 229 +++++++++++--------- 3 files changed, 249 insertions(+), 242 deletions(-) diff --git a/lib/src/screens/exchange/exchange_page.dart b/lib/src/screens/exchange/exchange_page.dart index 0a1cd27e8..8a6509a0d 100644 --- a/lib/src/screens/exchange/exchange_page.dart +++ b/lib/src/screens/exchange/exchange_page.dart @@ -163,66 +163,63 @@ class ExchangePage extends BasePage { ), bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - bottomSection: ConstrainedBox( - constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), - child: Column(children: [ - Padding( - padding: EdgeInsets.only(bottom: 15), - child: Observer(builder: (_) { - final description = exchangeViewModel.isFixedRateMode - ? exchangeViewModel.isAvailableInSelected - ? S.of(context).amount_is_guaranteed - : S.of(context).fixed_pair_not_supported - : exchangeViewModel.isAvailableInSelected - ? S.of(context).amount_is_estimate - : S.of(context).variable_pair_not_supported; - return Center( - child: Text( - description, - textAlign: TextAlign.center, - style: TextStyle( - color: Theme.of(context) - .primaryTextTheme! - .headline1! - .decorationColor!, - fontWeight: FontWeight.w500, - fontSize: 12), - ), - ); - }), - ), - Observer( - builder: (_) => LoadingPrimaryButton( - text: S.of(context).exchange, - onPressed: () { - if (_formKey.currentState != null && _formKey.currentState!.validate()) { - if ((exchangeViewModel.depositCurrency == - CryptoCurrency.xmr) && - (!(exchangeViewModel.status - is SyncedSyncStatus))) { - showPopUp( - context: context, - builder: (BuildContext context) { - return AlertWithOneAction( - alertTitle: S.of(context).exchange, - alertContent: S - .of(context) - .exchange_sync_alert_content, - buttonText: S.of(context).ok, - buttonAction: () => - Navigator.of(context).pop()); - }); - } else { - exchangeViewModel.createTrade(); - } + bottomSection: Column(children: [ + Padding( + padding: EdgeInsets.only(bottom: 15), + child: Observer(builder: (_) { + final description = exchangeViewModel.isFixedRateMode + ? exchangeViewModel.isAvailableInSelected + ? S.of(context).amount_is_guaranteed + : S.of(context).fixed_pair_not_supported + : exchangeViewModel.isAvailableInSelected + ? S.of(context).amount_is_estimate + : S.of(context).variable_pair_not_supported; + return Center( + child: Text( + description, + textAlign: TextAlign.center, + style: TextStyle( + color: Theme.of(context) + .primaryTextTheme! + .headline1! + .decorationColor!, + fontWeight: FontWeight.w500, + fontSize: 12), + ), + ); + }), + ), + Observer( + builder: (_) => LoadingPrimaryButton( + text: S.of(context).exchange, + onPressed: () { + if (_formKey.currentState != null && _formKey.currentState!.validate()) { + if ((exchangeViewModel.depositCurrency == + CryptoCurrency.xmr) && + (!(exchangeViewModel.status + is SyncedSyncStatus))) { + showPopUp( + context: context, + builder: (BuildContext context) { + return AlertWithOneAction( + alertTitle: S.of(context).exchange, + alertContent: S + .of(context) + .exchange_sync_alert_content, + buttonText: S.of(context).ok, + buttonAction: () => + Navigator.of(context).pop()); + }); + } else { + exchangeViewModel.createTrade(); } - }, - color: Theme.of(context).accentTextTheme!.bodyText1!.color!, - textColor: Colors.white, - isDisabled: exchangeViewModel.selectedProviders.isEmpty, - isLoading: exchangeViewModel.tradeState is TradeIsCreating)), - ]), - ), + } + }, + color: Theme.of(context).accentTextTheme!.bodyText1!.color!, + textColor: Colors.white, + isDisabled: exchangeViewModel.selectedProviders.isEmpty, + isLoading: exchangeViewModel.tradeState is TradeIsCreating)), + ]), )), )); } diff --git a/lib/src/screens/send/send_page.dart b/lib/src/screens/send/send_page.dart index 0ddaaf83e..5727c1e15 100644 --- a/lib/src/screens/send/send_page.dart +++ b/lib/src/screens/send/send_page.dart @@ -247,83 +247,80 @@ class SendPage extends BasePage { ), bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - bottomSection: ConstrainedBox( - constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), - child: Column( - children: [ - if (sendViewModel.hasCurrecyChanger) - Observer(builder: (_) => - Padding( - padding: EdgeInsets.only(bottom: 12), - child: PrimaryButton( - onPressed: () => presentCurrencyPicker(context), - text: 'Change your asset (${sendViewModel.selectedCryptoCurrency})', - color: Colors.transparent, - textColor: Theme.of(context) - .accentTextTheme! - .headline3! - .decorationColor!, - ) - ) - ), - if (sendViewModel.hasMultiRecipient) + bottomSection: Column( + children: [ + if (sendViewModel.hasCurrecyChanger) + Observer(builder: (_) => Padding( - padding: EdgeInsets.only(bottom: 12), - child: PrimaryButton( - onPressed: () { - sendViewModel.addOutput(); - Future.delayed(const Duration(milliseconds: 250), () { - controller.jumpToPage(sendViewModel.outputs.length - 1); - }); - }, - text: S.of(context).add_receiver, - color: Colors.transparent, - textColor: Theme.of(context) - .accentTextTheme! - .headline3! - .decorationColor!, - isDottedBorder: true, - borderColor: Theme.of(context) - .primaryTextTheme! - .headline3! - .decorationColor!, - )), - Observer( - builder: (_) { - return LoadingPrimaryButton( - onPressed: () async { - if (_formKey.currentState != null && !_formKey.currentState!.validate()) { - if (sendViewModel.outputs.length > 1) { - showErrorValidationAlert(context); - } - - return; - } - - final notValidItems = sendViewModel.outputs - .where((item) => - item.address.isEmpty || item.cryptoAmount.isEmpty) - .toList(); - - if (notValidItems?.isNotEmpty ?? false) { - showErrorValidationAlert(context); - return; - } - - await sendViewModel.createTransaction(); - + padding: EdgeInsets.only(bottom: 12), + child: PrimaryButton( + onPressed: () => presentCurrencyPicker(context), + text: 'Change your asset (${sendViewModel.selectedCryptoCurrency})', + color: Colors.transparent, + textColor: Theme.of(context) + .accentTextTheme! + .headline3! + .decorationColor!, + ) + ) + ), + if (sendViewModel.hasMultiRecipient) + Padding( + padding: EdgeInsets.only(bottom: 12), + child: PrimaryButton( + onPressed: () { + sendViewModel.addOutput(); + Future.delayed(const Duration(milliseconds: 250), () { + controller.jumpToPage(sendViewModel.outputs.length - 1); + }); }, - text: S.of(context).send, - color: Theme.of(context).accentTextTheme!.bodyText1!.color!, - textColor: Colors.white, - isLoading: sendViewModel.state is IsExecutingState || - sendViewModel.state is TransactionCommitting, - isDisabled: !sendViewModel.isReadyForSend, - ); - }, - ) - ], - ), + text: S.of(context).add_receiver, + color: Colors.transparent, + textColor: Theme.of(context) + .accentTextTheme! + .headline3! + .decorationColor!, + isDottedBorder: true, + borderColor: Theme.of(context) + .primaryTextTheme! + .headline3! + .decorationColor!, + )), + Observer( + builder: (_) { + return LoadingPrimaryButton( + onPressed: () async { + if (_formKey.currentState != null && !_formKey.currentState!.validate()) { + if (sendViewModel.outputs.length > 1) { + showErrorValidationAlert(context); + } + + return; + } + + final notValidItems = sendViewModel.outputs + .where((item) => + item.address.isEmpty || item.cryptoAmount.isEmpty) + .toList(); + + if (notValidItems?.isNotEmpty ?? false) { + showErrorValidationAlert(context); + return; + } + + await sendViewModel.createTransaction(); + + }, + text: S.of(context).send, + color: Theme.of(context).accentTextTheme!.bodyText1!.color!, + textColor: Colors.white, + isLoading: sendViewModel.state is IsExecutingState || + sendViewModel.state is TransactionCommitting, + isDisabled: !sendViewModel.isReadyForSend, + ); + }, + ) + ], )), ); } diff --git a/lib/src/widgets/primary_button.dart b/lib/src/widgets/primary_button.dart index a563319c5..c27169894 100644 --- a/lib/src/widgets/primary_button.dart +++ b/lib/src/widgets/primary_button.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:dotted_border/dotted_border.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; @@ -24,28 +25,31 @@ class PrimaryButton extends StatelessWidget { @override Widget build(BuildContext context) { - final content = SizedBox( - width: double.infinity, - height: 52.0, - child: TextButton( - onPressed: isDisabled - ? (onDisabledPressed != null ? onDisabledPressed : null) : onPressed, - style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color), - shape: MaterialStateProperty.all( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(26.0), + final content = ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: SizedBox( + width: double.infinity, + height: 52.0, + child: TextButton( + onPressed: isDisabled + ? (onDisabledPressed != null ? onDisabledPressed : null) : onPressed, + style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color), + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: BorderRadius.circular(26.0), + ), ), - ), - overlayColor: MaterialStateProperty.all(Colors.transparent)), - child: Text(text, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 15.0, - fontWeight: FontWeight.w600, - color: isDisabled - ? textColor.withOpacity(0.5) - : textColor)), - )); + overlayColor: MaterialStateProperty.all(Colors.transparent)), + child: Text(text, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 15.0, + fontWeight: FontWeight.w600, + color: isDisabled + ? textColor.withOpacity(0.5) + : textColor)), + )), + ); return isDottedBorder ? DottedBorder( @@ -77,29 +81,32 @@ class LoadingPrimaryButton extends StatelessWidget { @override Widget build(BuildContext context) { - return SizedBox( - width: double.infinity, - height: 52.0, - child: TextButton( - onPressed: (isLoading || isDisabled) ? null : onPressed, - style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color), - shape: MaterialStateProperty.all( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(26.0), - ), - )), - - child: isLoading - ? CupertinoActivityIndicator(animating: true) - : Text(text, - style: TextStyle( - fontSize: 15.0, - fontWeight: FontWeight.w600, - color: isDisabled - ? textColor.withOpacity(0.5) - : textColor + return ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: SizedBox( + width: double.infinity, + height: 52.0, + child: TextButton( + onPressed: (isLoading || isDisabled) ? null : onPressed, + style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color), + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: BorderRadius.circular(26.0), + ), )), - )); + + child: isLoading + ? CupertinoActivityIndicator(animating: true) + : Text(text, + style: TextStyle( + fontSize: 15.0, + fontWeight: FontWeight.w600, + color: isDisabled + ? textColor.withOpacity(0.5) + : textColor + )), + )), + ); } } @@ -130,45 +137,48 @@ class PrimaryIconButton extends StatelessWidget { @override Widget build(BuildContext context) { - return SizedBox( - width: double.infinity, - height: 52.0, - child: TextButton( - onPressed: onPressed, - style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color), - shape: MaterialStateProperty.all( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(radius), - ), - )), - child: Stack( - children: [ - Row( - mainAxisAlignment: mainAxisAlignment, - children: [ - Container( - width: 26.0, - height: 52.0, - decoration: BoxDecoration( - shape: BoxShape.circle, color: iconBackgroundColor), - child: Center( - child: Icon(iconData, color: iconColor, size: 22.0) - ), + return ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: SizedBox( + width: double.infinity, + height: 52.0, + child: TextButton( + onPressed: onPressed, + style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color), + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: BorderRadius.circular(radius), ), - ], - ), - Container( - height: 52.0, - child: Center( - child: Text(text, - style: TextStyle( - fontSize: 16.0, - color: textColor)), + )), + child: Stack( + children: [ + Row( + mainAxisAlignment: mainAxisAlignment, + children: [ + Container( + width: 26.0, + height: 52.0, + decoration: BoxDecoration( + shape: BoxShape.circle, color: iconBackgroundColor), + child: Center( + child: Icon(iconData, color: iconColor, size: 22.0) + ), + ), + ], ), - ) - ], - ), - )); + Container( + height: 52.0, + child: Center( + child: Text(text, + style: TextStyle( + fontSize: 16.0, + color: textColor)), + ), + ) + ], + ), + )), + ); } } @@ -190,34 +200,37 @@ class PrimaryImageButton extends StatelessWidget { @override Widget build(BuildContext context) { - return SizedBox( - width: double.infinity, - height: 52.0, - child: TextButton( - onPressed: onPressed, - style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color), - shape: MaterialStateProperty.all( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(26.0), - ), - )), - child:Center( - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - image, - SizedBox(width: 15), - Text( - text, - style: TextStyle( - fontSize: 15, - fontWeight: FontWeight.w600, - color: textColor + return ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: SizedBox( + width: double.infinity, + height: 52.0, + child: TextButton( + onPressed: onPressed, + style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color), + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: BorderRadius.circular(26.0), ), - ) - ], - ), - ) - )); + )), + child:Center( + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + image, + SizedBox(width: 15), + Text( + text, + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: textColor + ), + ) + ], + ), + ) + )), + ); } }