Constrain primary Buttons width

This commit is contained in:
OmarHatem 2023-02-14 18:05:44 +02:00
parent fb5efc0429
commit 02fe3c008f
3 changed files with 249 additions and 242 deletions

View file

@ -163,66 +163,63 @@ class ExchangePage extends BasePage {
), ),
bottomSectionPadding: bottomSectionPadding:
EdgeInsets.only(left: 24, right: 24, bottom: 24), EdgeInsets.only(left: 24, right: 24, bottom: 24),
bottomSection: ConstrainedBox( bottomSection: Column(children: <Widget>[
constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), Padding(
child: Column(children: <Widget>[ padding: EdgeInsets.only(bottom: 15),
Padding( child: Observer(builder: (_) {
padding: EdgeInsets.only(bottom: 15), final description = exchangeViewModel.isFixedRateMode
child: Observer(builder: (_) { ? exchangeViewModel.isAvailableInSelected
final description = exchangeViewModel.isFixedRateMode ? S.of(context).amount_is_guaranteed
? exchangeViewModel.isAvailableInSelected : S.of(context).fixed_pair_not_supported
? S.of(context).amount_is_guaranteed : exchangeViewModel.isAvailableInSelected
: S.of(context).fixed_pair_not_supported ? S.of(context).amount_is_estimate
: exchangeViewModel.isAvailableInSelected : S.of(context).variable_pair_not_supported;
? S.of(context).amount_is_estimate return Center(
: S.of(context).variable_pair_not_supported; child: Text(
return Center( description,
child: Text( textAlign: TextAlign.center,
description, style: TextStyle(
textAlign: TextAlign.center, color: Theme.of(context)
style: TextStyle( .primaryTextTheme!
color: Theme.of(context) .headline1!
.primaryTextTheme! .decorationColor!,
.headline1! fontWeight: FontWeight.w500,
.decorationColor!, fontSize: 12),
fontWeight: FontWeight.w500, ),
fontSize: 12), );
), }),
); ),
}), Observer(
), builder: (_) => LoadingPrimaryButton(
Observer( text: S.of(context).exchange,
builder: (_) => LoadingPrimaryButton( onPressed: () {
text: S.of(context).exchange, if (_formKey.currentState != null && _formKey.currentState!.validate()) {
onPressed: () { if ((exchangeViewModel.depositCurrency ==
if (_formKey.currentState != null && _formKey.currentState!.validate()) { CryptoCurrency.xmr) &&
if ((exchangeViewModel.depositCurrency == (!(exchangeViewModel.status
CryptoCurrency.xmr) && is SyncedSyncStatus))) {
(!(exchangeViewModel.status showPopUp<void>(
is SyncedSyncStatus))) { context: context,
showPopUp<void>( builder: (BuildContext context) {
context: context, return AlertWithOneAction(
builder: (BuildContext context) { alertTitle: S.of(context).exchange,
return AlertWithOneAction( alertContent: S
alertTitle: S.of(context).exchange, .of(context)
alertContent: S .exchange_sync_alert_content,
.of(context) buttonText: S.of(context).ok,
.exchange_sync_alert_content, buttonAction: () =>
buttonText: S.of(context).ok, Navigator.of(context).pop());
buttonAction: () => });
Navigator.of(context).pop()); } else {
}); exchangeViewModel.createTrade();
} else {
exchangeViewModel.createTrade();
}
} }
}, }
color: Theme.of(context).accentTextTheme!.bodyText1!.color!, },
textColor: Colors.white, color: Theme.of(context).accentTextTheme!.bodyText1!.color!,
isDisabled: exchangeViewModel.selectedProviders.isEmpty, textColor: Colors.white,
isLoading: exchangeViewModel.tradeState is TradeIsCreating)), isDisabled: exchangeViewModel.selectedProviders.isEmpty,
]), isLoading: exchangeViewModel.tradeState is TradeIsCreating)),
), ]),
)), )),
)); ));
} }

View file

@ -247,83 +247,80 @@ class SendPage extends BasePage {
), ),
bottomSectionPadding: bottomSectionPadding:
EdgeInsets.only(left: 24, right: 24, bottom: 24), EdgeInsets.only(left: 24, right: 24, bottom: 24),
bottomSection: ConstrainedBox( bottomSection: Column(
constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), children: [
child: Column( if (sendViewModel.hasCurrecyChanger)
children: [ Observer(builder: (_) =>
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)
Padding( Padding(
padding: EdgeInsets.only(bottom: 12), padding: EdgeInsets.only(bottom: 12),
child: PrimaryButton( child: PrimaryButton(
onPressed: () { onPressed: () => presentCurrencyPicker(context),
sendViewModel.addOutput(); text: 'Change your asset (${sendViewModel.selectedCryptoCurrency})',
Future.delayed(const Duration(milliseconds: 250), () { color: Colors.transparent,
controller.jumpToPage(sendViewModel.outputs.length - 1); textColor: Theme.of(context)
}); .accentTextTheme!
}, .headline3!
text: S.of(context).add_receiver, .decorationColor!,
color: Colors.transparent, )
textColor: Theme.of(context) )
.accentTextTheme! ),
.headline3! if (sendViewModel.hasMultiRecipient)
.decorationColor!, Padding(
isDottedBorder: true, padding: EdgeInsets.only(bottom: 12),
borderColor: Theme.of(context) child: PrimaryButton(
.primaryTextTheme! onPressed: () {
.headline3! sendViewModel.addOutput();
.decorationColor!, Future.delayed(const Duration(milliseconds: 250), () {
)), controller.jumpToPage(sendViewModel.outputs.length - 1);
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, text: S.of(context).add_receiver,
color: Theme.of(context).accentTextTheme!.bodyText1!.color!, color: Colors.transparent,
textColor: Colors.white, textColor: Theme.of(context)
isLoading: sendViewModel.state is IsExecutingState || .accentTextTheme!
sendViewModel.state is TransactionCommitting, .headline3!
isDisabled: !sendViewModel.isReadyForSend, .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,
);
},
)
],
)), )),
); );
} }

View file

@ -1,3 +1,4 @@
import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:dotted_border/dotted_border.dart'; import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@ -24,28 +25,31 @@ class PrimaryButton extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final content = SizedBox( final content = ConstrainedBox(
width: double.infinity, constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
height: 52.0, child: SizedBox(
child: TextButton( width: double.infinity,
onPressed: isDisabled height: 52.0,
? (onDisabledPressed != null ? onDisabledPressed : null) : onPressed, child: TextButton(
style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color), onPressed: isDisabled
shape: MaterialStateProperty.all<RoundedRectangleBorder>( ? (onDisabledPressed != null ? onDisabledPressed : null) : onPressed,
RoundedRectangleBorder( style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color),
borderRadius: BorderRadius.circular(26.0), shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(26.0),
),
), ),
), overlayColor: MaterialStateProperty.all(Colors.transparent)),
overlayColor: MaterialStateProperty.all(Colors.transparent)), child: Text(text,
child: Text(text, textAlign: TextAlign.center,
textAlign: TextAlign.center, style: TextStyle(
style: TextStyle( fontSize: 15.0,
fontSize: 15.0, fontWeight: FontWeight.w600,
fontWeight: FontWeight.w600, color: isDisabled
color: isDisabled ? textColor.withOpacity(0.5)
? textColor.withOpacity(0.5) : textColor)),
: textColor)), )),
)); );
return isDottedBorder return isDottedBorder
? DottedBorder( ? DottedBorder(
@ -77,29 +81,32 @@ class LoadingPrimaryButton extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SizedBox( return ConstrainedBox(
width: double.infinity, constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
height: 52.0, child: SizedBox(
child: TextButton( width: double.infinity,
onPressed: (isLoading || isDisabled) ? null : onPressed, height: 52.0,
style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color), child: TextButton(
shape: MaterialStateProperty.all<RoundedRectangleBorder>( onPressed: (isLoading || isDisabled) ? null : onPressed,
RoundedRectangleBorder( style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color),
borderRadius: BorderRadius.circular(26.0), shape: MaterialStateProperty.all<RoundedRectangleBorder>(
), 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
)), )),
));
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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SizedBox( return ConstrainedBox(
width: double.infinity, constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
height: 52.0, child: SizedBox(
child: TextButton( width: double.infinity,
onPressed: onPressed, height: 52.0,
style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color), child: TextButton(
shape: MaterialStateProperty.all<RoundedRectangleBorder>( onPressed: onPressed,
RoundedRectangleBorder( style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color),
borderRadius: BorderRadius.circular(radius), shape: MaterialStateProperty.all<RoundedRectangleBorder>(
), RoundedRectangleBorder(
)), borderRadius: BorderRadius.circular(radius),
child: Stack(
children: <Widget>[
Row(
mainAxisAlignment: mainAxisAlignment,
children: <Widget>[
Container(
width: 26.0,
height: 52.0,
decoration: BoxDecoration(
shape: BoxShape.circle, color: iconBackgroundColor),
child: Center(
child: Icon(iconData, color: iconColor, size: 22.0)
),
), ),
], )),
), child: Stack(
Container( children: <Widget>[
height: 52.0, Row(
child: Center( mainAxisAlignment: mainAxisAlignment,
child: Text(text, children: <Widget>[
style: TextStyle( Container(
fontSize: 16.0, width: 26.0,
color: textColor)), 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SizedBox( return ConstrainedBox(
width: double.infinity, constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
height: 52.0, child: SizedBox(
child: TextButton( width: double.infinity,
onPressed: onPressed, height: 52.0,
style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color), child: TextButton(
shape: MaterialStateProperty.all<RoundedRectangleBorder>( onPressed: onPressed,
RoundedRectangleBorder( style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color),
borderRadius: BorderRadius.circular(26.0), shape: MaterialStateProperty.all<RoundedRectangleBorder>(
), RoundedRectangleBorder(
)), borderRadius: BorderRadius.circular(26.0),
child:Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
image,
SizedBox(width: 15),
Text(
text,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: textColor
), ),
) )),
], child:Center(
), child: Row(
) mainAxisSize: MainAxisSize.min,
)); children: <Widget>[
image,
SizedBox(width: 15),
Text(
text,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: textColor
),
)
],
),
)
)),
);
} }
} }