Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2025-03-12 09:32:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add manage cards page ui

Browse source
This commit is contained in:
Godwin Asuquo 2022-05-25 11:20:35 +02:00
parent cb12c970aa
commit 124ac56f18
12 changed files with 707 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
lib/di.dart
View file

@ -9,6 +9,7 @@ import 'package:cake_wallet/src/screens/cake_pay/auth/create_account_page.dart';
import 'package:cake_wallet/src/screens/cake_pay/auth/forgot_password_page.dart';
import 'package:cake_wallet/src/screens/cake_pay/auth/login_page.dart';
import 'package:cake_wallet/src/screens/cake_pay/cake_pay.dart';
import 'package:cake_wallet/src/screens/cake_pay/cards/buy_card_detail_page.dart';
import 'package:cake_wallet/src/screens/cake_pay/cards/buy_gift_card.dart';
import 'package:cake_wallet/src/screens/cake_pay/cards/manage_cards_page.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart';
@ -655,7 +656,9 @@ Future setup(
getIt.registerFactory(() => ManageCardsPage());
getIt.registerFactory(() => BuyGiftCardPage());
getIt.registerFactory(() => BuyGiftCardPage());
getIt.registerFactory(() => BuyGiftCardDetailPage());
_isSetupFinished = true;
}

5
lib/router.dart
View file

@ -9,6 +9,7 @@ import 'package:cake_wallet/src/screens/cake_pay/auth/create_account_page.dart';
import 'package:cake_wallet/src/screens/cake_pay/auth/forgot_password_page.dart';
import 'package:cake_wallet/src/screens/cake_pay/auth/login_page.dart';
import 'package:cake_wallet/src/screens/cake_pay/cake_pay.dart';
import 'package:cake_wallet/src/screens/cake_pay/cards/buy_card_detail_page.dart';
import 'package:cake_wallet/src/screens/cake_pay/cards/buy_gift_card.dart';
import 'package:cake_wallet/src/screens/cake_pay/cards/manage_cards_page.dart';
import 'package:cake_wallet/src/screens/order_details/order_details_page.dart';
@ -425,6 +426,10 @@ Route<dynamic> createRoute(RouteSettings settings) {
case Routes.buyGiftCardPage:
return CupertinoPageRoute<void>(builder: (_) => getIt.get<BuyGiftCardPage>());
case Routes.buyGiftCardDetailPage:
return CupertinoPageRoute<void>(builder: (_) => getIt.get<BuyGiftCardDetailPage>());
default:
return MaterialPageRoute<void>(

1
lib/routes.dart
View file

@ -66,4 +66,5 @@ class Routes {
static const cakePayForgotPasswordPage = '/cake_pay_forgot_password_page';
static const manageCardsPage = '/manage_cards_page';
static const buyGiftCardPage = '/buy_gift_card_page';
static const buyGiftCardDetailPage = '/buy_gift_card_detail_page';
}

333
lib/src/screens/cake_pay/cards/buy_card_detail_page.dart Normal file
View file

@ -0,0 +1,333 @@
import 'package:cake_wallet/di.dart';
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
import 'package:cake_wallet/src/widgets/discount_badge.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
import 'package:cake_wallet/store/settings_store.dart';
import 'package:cake_wallet/themes/theme_base.dart';
import 'package:cake_wallet/typography.dart';
import 'package:cake_wallet/utils/show_pop_up.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:cake_wallet/generated/i18n.dart';
class BuyGiftCardDetailPage extends StatelessWidget {
ThemeBase get currentTheme => getIt.get<SettingsStore>().currentTheme;
Color get backgroundLightColor => Colors.white;
Color get backgroundDarkColor => PaletteDark.backgroundColor;
void onClose(BuildContext context) => Navigator.of(context).pop();
Widget leading(BuildContext context) {
if (ModalRoute.of(context).isFirst) {
return null;
}
final _backButton = Icon(
Icons.arrow_back_ios,
color: Theme.of(context).primaryTextTheme.title.color,
size: 16,
);
return Padding(
padding: const EdgeInsets.only(left: 10.0),
child: SizedBox(
height: 37,
width: 37,
child: ButtonTheme(
minWidth: double.minPositive,
child: FlatButton(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
padding: EdgeInsets.all(0),
onPressed: () => onClose(context),
child: _backButton),
),
),
);
}
Widget middle(BuildContext context) {
return Text(
'AppleBees',
style: TextStyle(
fontSize: 22,
fontFamily: 'Lato',
fontWeight: FontWeight.w900,
),
);
}
@override
Widget build(BuildContext context) {
final _backgroundColor = currentTheme.type == ThemeType.dark ? backgroundDarkColor : backgroundLightColor;
return Scaffold(
backgroundColor: _backgroundColor,
body: ScrollableWithBottomSection(
contentPadding: EdgeInsets.zero,
content: Column(
children: [
SizedBox(height: 60),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [leading(context), middle(context), DiscountBadge()],
),
SizedBox(height: 36),
Container(
padding: EdgeInsets.symmetric(vertical: 24),
margin: EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(
colors: [
Theme.of(context).primaryTextTheme.subhead.color,
Theme.of(context).primaryTextTheme.subhead.decorationColor,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Column(
children: [
Text(
'Gift Card Amount',
style: textSmall(),
),
SizedBox(height: 4),
Text(
'\$1000.12',
style: textXLargeSemiBold(),
),
SizedBox(height: 24),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Bill Amount',
style: textSmall(),
),
SizedBox(height: 4),
Text(
'\$1000.00',
style: textLargeSemiBold(),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'Tip',
style: textSmall(),
),
SizedBox(height: 4),
Text(
'\$1000.00',
style: textLargeSemiBold(),
),
],
),
],
),
),
SizedBox(height: 16),
Divider(),
SizedBox(height: 16),
Text(
'You Pay',
style: textSmall(),
),
SizedBox(height: 4),
Text(
'22.3435345000 XMR',
style: textLargeSemiBold(),
),
],
),
),
Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Tip:',
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color,
fontWeight: FontWeight.w700,
fontSize: 14,
),
),
SizedBox(height: 4),
TipButtonGroup()
],
),
),
SizedBox(height: 20),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: InkWell(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
S.of(context).how_to_use_card,
style: textMediumSemiBold(
color: Theme.of(context).primaryTextTheme.title.color,
),
),
Icon(
Icons.chevron_right_rounded,
color: Theme.of(context).primaryTextTheme.title.color,
),
],
),
),
)
],
),
bottomSection: Column(
children: [
Padding(
padding: EdgeInsets.only(bottom: 12),
child: PrimaryButton(
onPressed: () => purchaseCard(context),
text: S.of(context).purchase_gift_card,
color: Theme.of(context).accentTextTheme.body2.color,
textColor: Colors.white,
),
),
SizedBox(height: 8),
Text(S.of(context).settings_terms_and_conditions,
style: textMediumSemiBold(
color: Theme.of(context).primaryTextTheme.body1.color,
).copyWith(fontSize: 12)),
SizedBox(height: 16)
],
),
),
);
}
}
void purchaseCard(BuildContext context) {
showPopUp<void>(
context: context,
builder: (dialogContext) {
return AlertWithTwoActions(
alertTitle: S.of(context).save_backup_password_alert,
alertContent: S.of(context).change_backup_password_alert,
rightButtonText: S.of(context).ok,
leftButtonText: S.of(context).cancel,
leftActionColor: Color(0xffFF6600),
isDividerExist: true,
rightActionColor: Theme.of(context).accentTextTheme.body2.color,
actionRightButton: () async {
Navigator.of(dialogContext)..pop()..pop();
},
actionLeftButton: () => Navigator.of(dialogContext).pop());
});
}
class TipButtonGroup extends StatefulWidget {
const TipButtonGroup({
Key key,
}) : super(key: key);
@override
_TipButtonGroupState createState() => _TipButtonGroupState();
}
class _TipButtonGroupState extends State<TipButtonGroup> {
String selectedTip;
bool _isSelected(String value) {
return selectedTip == value;
}
@override
Widget build(BuildContext context) {
return Row(
children: [
TipButton(
isSelected: _isSelected('299'),
caption: '\$10',
subTitle: '%299',
),
SizedBox(width: 4),
TipButton(
caption: '\$10',
subTitle: '%299',
),
SizedBox(width: 4),
TipButton(
isSelected: _isSelected('299'),
caption: '\$10',
subTitle: '%299',
),
SizedBox(width: 4),
TipButton(
isSelected: _isSelected('299'),
caption: 'Custom',
),
],
);
}
}
class TipButton extends StatelessWidget {
final String caption;
final String subTitle;
final bool isSelected;
final void Function(int, bool) onTap;
const TipButton({
@required this.caption,
this.subTitle,
this.onTap,
this.isSelected = false,
});
@override
Widget build(BuildContext context) {
return Container(
height: 49,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(caption, style: textSmallSemiBold(color: Theme.of(context).primaryTextTheme.title.color)),
if (subTitle != null) ...[
SizedBox(height: 4),
Text(
subTitle,
style: textXSmallSemiBold(color: Palette.gray),
),
]
],
),
padding: EdgeInsets.symmetric(horizontal: 18, vertical: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color.fromRGBO(242, 240, 250, 1),
gradient: isSelected
? LinearGradient(
colors: [
Theme.of(context).primaryTextTheme.subhead.color,
Theme.of(context).primaryTextTheme.subhead.decorationColor,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)
: null,
),
);
}
}

134
lib/src/screens/cake_pay/cards/buy_gift_card.dart
View file

@ -1,16 +1,19 @@
import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/widgets/base_text_form_field.dart';
import 'package:cake_wallet/src/widgets/keyboard_done_button.dart';
import 'package:cake_wallet/src/widgets/market_place_item.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
import 'package:cake_wallet/themes/theme_base.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:keyboard_actions/keyboard_actions.dart';
import 'package:cake_wallet/generated/i18n.dart';
class BuyGiftCardPage extends BasePage {
BuyGiftCardPage(): _amountFieldFocus = FocusNode(),
BuyGiftCardPage()
: _amountFieldFocus = FocusNode(),
_amountController = TextEditingController();
@override
String get title => 'Enter Amount';
@ -24,16 +27,14 @@ class BuyGiftCardPage extends BasePage {
@override
AppBarStyle get appBarStyle => AppBarStyle.transparent;
Color get textColor =>
currentTheme.type == ThemeType.dark ? Colors.white : Color(0xff393939);
Color get textColor => currentTheme.type == ThemeType.dark ? Colors.white : Color(0xff393939);
final TextEditingController _amountController;
final FocusNode _amountFieldFocus;
final FocusNode _amountFieldFocus;
@override
Widget body(BuildContext context) {
final _width = MediaQuery.of(context).size.width;
return KeyboardActions(
disableScroll: true,
config: KeyboardActionsConfig(
@ -41,7 +42,7 @@ class BuyGiftCardPage extends BasePage {
keyboardBarColor: Theme.of(context).accentTextTheme.body2.backgroundColor,
nextFocus: false,
actions: [
KeyboardActionsItem(
KeyboardActionsItem(
focusNode: _amountFieldFocus,
toolbarButtons: [(_) => KeyboardDoneButton()],
),
@ -50,13 +51,12 @@ class BuyGiftCardPage extends BasePage {
color: Theme.of(context).backgroundColor,
child: ScrollableWithBottomSection(
contentPadding: EdgeInsets.zero,
content:
content: Column(
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: 14),
padding: EdgeInsets.symmetric(horizontal: 25),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(24),
bottomRight: Radius.circular(24)),
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)),
gradient: LinearGradient(colors: [
Theme.of(context).primaryTextTheme.subhead.color,
Theme.of(context).primaryTextTheme.subhead.decorationColor,
@ -66,31 +66,95 @@ class BuyGiftCardPage extends BasePage {
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(height: 200),
BaseTextFormField(controller: _amountController, focusNode: _amountFieldFocus, )
SizedBox(height: 150),
BaseTextFormField(
controller: _amountController,
focusNode: _amountFieldFocus,
keyboardType: TextInputType.numberWithOptions(signed: false, decimal: true),
inputFormatters: [FilteringTextInputFormatter.deny(RegExp('[\-|\ ]'))],
hintText: '1000',
placeholderTextStyle: TextStyle(
color: Theme.of(context).primaryTextTheme.headline.color,
fontWeight: FontWeight.w500,
fontSize: 36,
),
borderColor: Theme.of(context).primaryTextTheme.headline.color,
textColor: Colors.white,
textStyle: TextStyle(
color: Colors.white,
fontSize: 36,
),
suffixIcon: SizedBox(
width: _width / 6,
),
prefixIcon: Padding(
padding: EdgeInsets.only(
top: 5.0,
left: _width / 4,
),
child: Text(
'USD: ',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 36,
),
),
),
),
SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Min: \$5',
style: TextStyle(
color: Theme.of(context).primaryTextTheme.headline.color,
),
),
Text(
'Max: \$20000',
style: TextStyle(
color: Theme.of(context).primaryTextTheme.headline.color,
),
),
],
),
SizedBox(height: 24),
],
),
),
bottomSection:
Column(
children: [
Padding(
padding: EdgeInsets.only(bottom: 12),
child: PrimaryButton(
onPressed: () {},
text: S.of(context).continue_text,
color: Theme.of(context).accentTextTheme.body2.color,
textColor: Colors.white,
),
),
SizedBox(height: 20),
SizedBox(height: 10)
],
) ,
) ,),
Padding(
padding: const EdgeInsets.all(24.0),
child: MarketPlaceItem(
onTap: () {},
title: 'Applebee’s',
hasDiscount: true,
isWhiteBackground: true,
padding: EdgeInsets.all(12),
subTitle: 'subTitle',
logoUrl: '',
),
)
],
),
bottomSection: Column(
children: [
Padding(
padding: EdgeInsets.only(bottom: 12),
child: PrimaryButton(
onPressed: () =>Navigator.of(context).pushNamed(Routes.buyGiftCardDetailPage),
text: S.of(context).continue_text,
color: Theme.of(context).accentTextTheme.body2.color,
textColor: Colors.white,
),
),
SizedBox(height: 20),
SizedBox(height: 10)
],
),
),
),
);
}
}

112
lib/src/screens/cake_pay/widgets/confirm_modal.dart Normal file
View file

@ -0,0 +1,112 @@
import 'dart:ui';
import 'package:cake_wallet/palette.dart';
import 'package:flutter/material.dart';
class ConfirmModal extends StatelessWidget {
ConfirmModal({
@required this.alertTitle,
@required this.alertContent,
@required this.leftButtonText,
@required this.rightButtonText,
@required this.actionLeftButton,
@required this.actionRightButton,
this.leftActionColor,
this.rightActionColor,
});
final String alertTitle;
final Widget alertContent;
final String leftButtonText;
final String rightButtonText;
final VoidCallback actionLeftButton;
final VoidCallback actionRightButton;
final Color leftActionColor;
final Color rightActionColor;
Widget actionButtons(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
ActionButton(
buttonText: leftButtonText,
action: actionLeftButton,
backgoundColor: leftActionColor,
),
Container(
width: 1,
height: 52,
color: Theme.of(context).dividerColor,
),
ActionButton(
buttonText: rightButtonText,
action: actionRightButton,
backgoundColor: rightActionColor,
),
],
);
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.transparent,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
child: Container(
decoration: BoxDecoration(color: PaletteDark.darkNightBlue.withOpacity(0.75)),
child: Center(
child: GestureDetector(
onTap: () => null,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(30)),
child: Container(
width: 300, color: Theme.of(context).accentTextTheme.title.decorationColor, child: alertContent),
),
),
),
),
),
);
}
}
class ActionButton extends StatelessWidget {
const ActionButton({
@required this.buttonText,
@required this.action,
this.backgoundColor,
});
final String buttonText;
final VoidCallback action;
final Color backgoundColor;
@override
Widget build(BuildContext context) {
return Flexible(
child: Container(
height: 52,
padding: EdgeInsets.only(left: 6, right: 6),
color: backgoundColor,
child: ButtonTheme(
minWidth: double.infinity,
child: FlatButton(
onPressed: action,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
child: Text(
buttonText,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
fontFamily: 'Lato',
fontWeight: FontWeight.w600,
color: backgoundColor != null ? Colors.white : Theme.of(context).primaryTextTheme.body1.backgroundColor,
decoration: TextDecoration.none,
),
)),
),
));
}
}

16
lib/src/widgets/alert_with_two_actions.dart
View file

@ -10,7 +10,10 @@ class AlertWithTwoActions extends BaseAlertDialog {
@required this.rightButtonText,
@required this.actionLeftButton,
@required this.actionRightButton,
this.alertBarrierDismissible = true
this.alertBarrierDismissible = true,
this.isDividerExist = false,
this.leftActionColor,
this.rightActionColor,
});
final String alertTitle;
@ -20,6 +23,9 @@ class AlertWithTwoActions extends BaseAlertDialog {
final VoidCallback actionLeftButton;
final VoidCallback actionRightButton;
final bool alertBarrierDismissible;
final Color leftActionColor;
final Color rightActionColor;
final bool isDividerExist;
@override
String get titleText => alertTitle;
@ -35,4 +41,10 @@ class AlertWithTwoActions extends BaseAlertDialog {
VoidCallback get actionRight => actionRightButton;
@override
bool get barrierDismissible => alertBarrierDismissible;
}
@override
Color get leftButtonColor => leftActionColor;
@override
Color get rightButtonColor => rightActionColor;
@override
bool get isDividerExists => isDividerExist;
}

98
lib/src/widgets/base_alert_dialog.dart
View file

@ -3,13 +3,17 @@ import 'package:flutter/material.dart';
import 'package:cake_wallet/palette.dart';
class BaseAlertDialog extends StatelessWidget {
String get titleText => '';
String get titleText => '';
String get contentText => '';
String get leftActionButtonText => '';
String get rightActionButtonText => '';
bool get isDividerExists => false;
VoidCallback get actionLeft => () {};
VoidCallback get actionRight => () {};
EdgeInsets get actionButtonPadding => EdgeInsets.only(left: 6, right: 6);
Color get rightButtonColor => Colors.transparent;
Color get leftButtonColor => Colors.transparent;
bool get barrierDismissible => true;
Widget title(BuildContext context) {
@ -46,30 +50,28 @@ class BaseAlertDialog extends StatelessWidget {
children: <Widget>[
Flexible(
child: Container(
height: 52,
padding: EdgeInsets.only(left: 6, right: 6),
color: Theme.of(context).accentTextTheme.body2.decorationColor,
child: ButtonTheme(
minWidth: double.infinity,
child: FlatButton(
onPressed: actionLeft,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
child: Text(
leftActionButtonText,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
fontFamily: 'Lato',
fontWeight: FontWeight.w600,
color: Theme.of(context).primaryTextTheme.body2
.backgroundColor,
decoration: TextDecoration.none,
),
)),
),
)
),
height: 52,
padding: actionButtonPadding,
color: leftButtonColor ?? Theme.of(context).accentTextTheme.body2.decorationColor,
child: ButtonTheme(
minWidth: double.infinity,
child: FlatButton(
onPressed: actionLeft,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
child: Text(
leftActionButtonText,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
fontFamily: 'Lato',
fontWeight: FontWeight.w600,
color: leftButtonColor != null ? Colors.white : Theme.of(context).primaryTextTheme.body2.backgroundColor,
decoration: TextDecoration.none,
),
)),
),
)),
Container(
width: 1,
height: 52,
@ -77,30 +79,28 @@ class BaseAlertDialog extends StatelessWidget {
),
Flexible(
child: Container(
height: 52,
padding: EdgeInsets.only(left: 6, right: 6),
color: Theme.of(context).accentTextTheme.body1.backgroundColor,
child: ButtonTheme(
minWidth: double.infinity,
child: FlatButton(
onPressed: actionRight,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
child: Text(
rightActionButtonText,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
fontFamily: 'Lato',
fontWeight: FontWeight.w600,
color: Theme.of(context).primaryTextTheme.body1
.backgroundColor,
decoration: TextDecoration.none,
),
)),
),
)
),
height: 52,
padding: actionButtonPadding,
color: rightButtonColor ?? Theme.of(context).accentTextTheme.body1.backgroundColor,
child: ButtonTheme(
minWidth: double.infinity,
child: FlatButton(
onPressed: actionRight,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
child: Text(
rightActionButtonText,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
fontFamily: 'Lato',
fontWeight: FontWeight.w600,
color: rightButtonColor != null ? Colors.white : Theme.of(context).primaryTextTheme.body1.backgroundColor,
decoration: TextDecoration.none,
),
)),
),
)),
],
);
}

29
lib/src/widgets/discount_badge.dart Normal file
View file

@ -0,0 +1,29 @@
import 'package:flutter/material.dart';
class DiscountBadge extends StatelessWidget {
const DiscountBadge({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.centerRight,
children: [
Image.asset('assets/images/badge_discount.png'),
Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Text(
'Save 20%',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500,
fontFamily: 'Lato',
),
),
)
],
);
}
}

34
lib/src/widgets/market_place_item.dart
View file

@ -1,3 +1,5 @@
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/src/widgets/discount_badge.dart';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
@ -8,6 +10,7 @@ class MarketPlaceItem extends StatelessWidget {
final String logoUrl;
final EdgeInsets padding;
final bool hasDiscount;
final bool isWhiteBackground;
MarketPlaceItem({
@required this.onTap,
@ -16,6 +19,7 @@ class MarketPlaceItem extends StatelessWidget {
this.logoUrl,
this.padding,
this.hasDiscount = false,
this.isWhiteBackground = false,
});
@override
@ -28,7 +32,7 @@ class MarketPlaceItem extends StatelessWidget {
padding: padding ?? EdgeInsets.all(20),
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.20),
color: isWhiteBackground ? Colors.black.withOpacity(0.1) : Colors.white.withOpacity(0.20),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: Colors.white.withOpacity(0.20),
@ -54,7 +58,7 @@ class MarketPlaceItem extends StatelessWidget {
Text(
title,
style: TextStyle(
color: Colors.white,
color: isWhiteBackground ? Palette.stateGray : Colors.white,
fontSize: 24,
fontWeight: FontWeight.w900,
),
@ -63,37 +67,23 @@ class MarketPlaceItem extends StatelessWidget {
Text(
subTitle,
style: TextStyle(
color: Colors.white,
),
color: isWhiteBackground ? Palette.niagara : Colors.white,
fontWeight: FontWeight.w500,
fontFamily: 'Lato'),
)
],
),
],
),
),
if (hasDiscount) ...[
if (hasDiscount)
Align(
alignment: Alignment.centerRight,
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Image.asset('assets/images/badge_discount.png'),
child: DiscountBadge(),
),
),
Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(top: 22.0, right: 2),
child: Text(
'Save 20%',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontFamily: 'Lato',
),
),
),
)
],
],
),
);

47
lib/typography.dart Normal file
View file

@ -0,0 +1,47 @@
import 'package:flutter/material.dart';
const latoFont = "Lato";
TextStyle textXSmall({Color color}) => _cakeRegular(10, color);
TextStyle textXSmallSemiBold({Color color}) => _cakeSemiBold(10, color);
TextStyle textSmall({Color color}) => _cakeRegular(14, color);
TextStyle textSmallSemiBold({Color color}) => _cakeSemiBold(14, color);
TextStyle textMedium({Color color}) => _cakeRegular(16, color);
TextStyle textMediumSemiBold({Color color}) => _cakeSemiBold(22, color);
TextStyle textLarge({Color color}) => _cakeRegular(18, color);
TextStyle textLargeSemiBold({Color color}) => _cakeSemiBold(24, color);
TextStyle textXLarge({Color color}) => _cakeRegular(32, color);
TextStyle textXLargeSemiBold({Color color}) => _cakeSemiBold(32, color);
TextStyle _cakeRegular(double size, Color color) => _textStyle(
size: size,
fontWeight: FontWeight.normal,
color: color,
);
TextStyle _cakeSemiBold(double size, Color color) => _textStyle(
size: size,
fontWeight: FontWeight.w700,
color: color,
);
TextStyle _textStyle({
@required double size,
@required FontWeight fontWeight,
Color color,
}) =>
TextStyle(
fontFamily: latoFont,
fontSize: size,
fontWeight: fontWeight,
color: color ?? Colors.white,
);

3
res/values/strings_en.arb
View file

@ -543,5 +543,6 @@
"manage_cards": "Manage Cards",
"setup_your_debit_card": "Set up your debit card",
"no_id_required": "No ID required. Top up and spend anywhere",
"how_to_use_card": "How to use this card"
"how_to_use_card": "How to use this card",
"purchase_gift_card": "Purchase Gift Card"
}