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:
EdgeInsets.only(left: 24, right: 24, bottom: 24),
bottomSection: ConstrainedBox(
constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column(children: <Widget>[
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<void>(
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: <Widget>[
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<void>(
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)),
]),
)),
));
}

View file

@ -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,
);
},
)
],
)),
);
}

View file

@ -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>(
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>(
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>(
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>(
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>(
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)
),
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>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radius),
),
],
),
Container(
height: 52.0,
child: Center(
child: Text(text,
style: TextStyle(
fontSize: 16.0,
color: textColor)),
)),
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)
),
),
],
),
)
],
),
));
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>(
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
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>(
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
),
)
],
),
)
)),
);
}
}