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

CAKE-15 | moved sync indicator to appbar of the dashboard page; added and applied poppins font to the app; changed balance page, date section row, trade row and transaction row; changed call of the dashboard page in the router

Browse source
This commit is contained in:
Oleksandr Sobol 2020-07-22 13:04:11 +03:00
parent 12ee8a519d
commit 25436d9b94
16 changed files with 213 additions and 245 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/fonts/Poppins-Bold.ttf Normal file
View file

Binary file not shown.

BIN
assets/fonts/Poppins-Medium.ttf Normal file
View file

Binary file not shown.

BIN
assets/fonts/Poppins-Regular.ttf Normal file
View file

Binary file not shown.

BIN
assets/images/changenow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
assets/images/morph.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
assets/images/xmrto.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

2
lib/palette.dart
View file

@ -33,7 +33,9 @@ class PaletteDark {
// NEW DESIGN // NEW DESIGN
static const Color backgroundColor = Color.fromRGBO(25, 35, 60, 1.0); static const Color backgroundColor = Color.fromRGBO(25, 35, 60, 1.0);
static const Color nightBlue = Color.fromRGBO(35, 47, 79, 1.0); static const Color nightBlue = Color.fromRGBO(35, 47, 79, 1.0);
static const Color wildNightBlue = Color.fromRGBO(39, 53, 96, 1.0);
static const Color cyanBlue = Color.fromRGBO(99, 113, 150, 1.0); static const Color cyanBlue = Color.fromRGBO(99, 113, 150, 1.0);
static const Color darkCyanBlue = Color.fromRGBO(91, 112, 146, 1.0);
static const Color orangeYellow = Color.fromRGBO(243, 166, 50, 1.0); static const Color orangeYellow = Color.fromRGBO(243, 166, 50, 1.0);
static const Color brightGreen = Color.fromRGBO(88, 243, 50, 1.0); static const Color brightGreen = Color.fromRGBO(88, 243, 50, 1.0);
static const Color oceanBlue = Color.fromRGBO(27, 39, 71, 1.0); static const Color oceanBlue = Color.fromRGBO(27, 39, 71, 1.0);

9
lib/router.dart
View file

@ -1,3 +1,4 @@
import 'package:cake_wallet/src/screens/dashboard/dashboard_page.dart';
import 'package:cake_wallet/src/screens/seed/wallet_seed_page.dart'; import 'package:cake_wallet/src/screens/seed/wallet_seed_page.dart';
import 'package:cake_wallet/view_model/wallet_new_vm.dart'; import 'package:cake_wallet/view_model/wallet_new_vm.dart';
import 'package:cake_wallet/view_model/wallet_restoration_from_seed_vm.dart'; import 'package:cake_wallet/view_model/wallet_restoration_from_seed_vm.dart';
@ -249,13 +250,7 @@ class Router {
case Routes.dashboard: case Routes.dashboard:
return CupertinoPageRoute<void>( return CupertinoPageRoute<void>(
builder: (_) => createDashboardPage( builder: (_) => getIt.get<DashboardPage>());
walletService: walletService,
priceStore: priceStore,
settingsStore: settingsStore,
trades: trades,
transactionDescriptions: transactionDescriptions,
walletStore: walletStore));
case Routes.send: case Routes.send:
return CupertinoPageRoute<void>( return CupertinoPageRoute<void>(

52
lib/src/screens/dashboard/dashboard_page.dart
View file

@ -11,6 +11,7 @@ import 'package:cake_wallet/src/screens/dashboard/widgets/action_button.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart'; import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart';
import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx/mobx.dart'; import 'package:mobx/mobx.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.dart';
class DashboardPage extends BasePage { class DashboardPage extends BasePage {
DashboardPage({@required this.walletViewModel}); DashboardPage({@required this.walletViewModel});
@ -21,6 +22,11 @@ class DashboardPage extends BasePage {
@override @override
Color get backgroundDarkColor => PaletteDark.backgroundColor; Color get backgroundDarkColor => PaletteDark.backgroundColor;
@override
Widget middle(BuildContext context) {
return SyncIndicator(dashboardViewModel: walletViewModel);
}
@override @override
Widget trailing(BuildContext context) { Widget trailing(BuildContext context) {
final menuButton = Image.asset('assets/images/menu.png', final menuButton = Image.asset('assets/images/menu.png',
@ -28,21 +34,17 @@ class DashboardPage extends BasePage {
return Container( return Container(
alignment: Alignment.centerRight, alignment: Alignment.centerRight,
child: SizedBox( width: 40,
width: 20, child: InkWell(
child: FlatButton( onTap: () async {
highlightColor: Colors.transparent, await showDialog<void>(
splashColor: Colors.transparent, builder: (_) => MenuWidget(
padding: EdgeInsets.all(0), name: walletViewModel.name,
onPressed: () async { subname: walletViewModel.subname,
await showDialog<void>( type: walletViewModel.type),
builder: (_) => MenuWidget( context: context);
name: walletViewModel.name, },
subname: walletViewModel.subname, child: menuButton
type: walletViewModel.type),
context: context);
},
child: menuButton),
), ),
); );
} }
@ -66,13 +68,13 @@ class DashboardPage extends BasePage {
mainAxisSize: MainAxisSize.max, mainAxisSize: MainAxisSize.max,
children: <Widget>[ children: <Widget>[
Expanded( Expanded(
child: PageView.builder( child: PageView.builder(
controller: controller, controller: controller,
itemCount: pages.length, itemCount: pages.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
return pages[index]; return pages[index];
} }
) )
), ),
Padding( Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
@ -96,9 +98,9 @@ class DashboardPage extends BasePage {
Container( Container(
width: double.infinity, width: double.infinity,
padding: EdgeInsets.only( padding: EdgeInsets.only(
left: 45, left: 45,
right: 45, right: 45,
bottom: 24 bottom: 24
), ),
child: Row( child: Row(
children: <Widget>[ children: <Widget>[

89
lib/src/screens/dashboard/widgets/balance_page.dart
View file

@ -2,88 +2,65 @@ import 'package:flutter/material.dart';
import 'package:cake_wallet/view_model/dashboard_view_model.dart'; import 'package:cake_wallet/view_model/dashboard_view_model.dart';
import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/palette.dart';
import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.dart';
class BalancePage extends StatelessWidget { class BalancePage extends StatelessWidget {
BalancePage({@required this.dashboardViewModel}); BalancePage({@required this.dashboardViewModel});
final DashboardViewModel dashboardViewModel; final DashboardViewModel dashboardViewModel;
final triangleImage = Image.asset('assets/images/triangle.png');
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
padding: EdgeInsets.only( padding: EdgeInsets.all(24),
top: 12, child: Center(
left: 24, child: Container(
right: 24, height: 160,
bottom: 24 child: Column(
), mainAxisAlignment: MainAxisAlignment.spaceBetween,
child: Stack( crossAxisAlignment: CrossAxisAlignment.center,
alignment: Alignment.center, children: <Widget>[
children: <Widget>[ Observer(
Positioned(
top: 0,
child: SyncIndicator(dashboardViewModel: dashboardViewModel)
),
Container(
height: 160,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Observer(
builder: (_) { builder: (_) {
return Row( return Text(
mainAxisSize: MainAxisSize.min, dashboardViewModel.wallet.currency.toString(),
crossAxisAlignment: CrossAxisAlignment.center, style: TextStyle(
children: <Widget>[ fontSize: 40,
Text( fontWeight: FontWeight.bold,
dashboardViewModel.wallet.currency.toString(), color: PaletteDark.cyanBlue,
style: TextStyle( height: 1
fontSize: 40, ),
fontWeight: FontWeight.bold,
color: PaletteDark.cyanBlue,
height: 1
),
),
Padding(
padding: EdgeInsets.only(left: 8),
child: triangleImage,
)
],
); );
} }
), ),
Observer( Observer(
builder: (_) { builder: (_) {
return Text( return Text(
dashboardViewModel.balance.totalBalance, dashboardViewModel.balance.totalBalance,
style: TextStyle( style: TextStyle(
fontSize: 54, fontSize: 54,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.white, color: Colors.white,
height: 1 height: 1
), ),
); );
} }
), ),
Observer( Observer(
builder: (_) { builder: (_) {
return Text( return Text(
'\$ 0.00', '\$ 0.00',
style: TextStyle( style: TextStyle(
fontSize: 18, fontSize: 18,
color: PaletteDark.cyanBlue, fontWeight: FontWeight.w500,
height: 1 color: PaletteDark.cyanBlue,
height: 1
), ),
); );
} }
), ),
], ],
), ),
) ),
],
), ),
); );
} }

20
lib/src/screens/dashboard/widgets/date_section_raw.dart
View file

@ -3,6 +3,7 @@ import 'package:intl/intl.dart';
import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/generated/i18n.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:cake_wallet/src/stores/settings/settings_store.dart'; import 'package:cake_wallet/src/stores/settings/settings_store.dart';
import 'package:cake_wallet/palette.dart';
class DateSectionRaw extends StatelessWidget { class DateSectionRaw extends StatelessWidget {
DateSectionRaw({this.date}); DateSectionRaw({this.date});
@ -35,21 +36,14 @@ class DateSectionRaw extends StatelessWidget {
} }
return Container( return Container(
height: 36, height: 35,
padding: EdgeInsets.only(top: 10, bottom: 10, left: 20, right: 20),
alignment: Alignment.center, alignment: Alignment.center,
decoration: BoxDecoration( color: Colors.transparent,
color: Theme.of(context).backgroundColor,
border: Border.all(
width: 1,
color: Theme.of(context).backgroundColor
),
),
child: Text(title, child: Text(title,
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 12,
color: Theme.of(context).primaryTextTheme.headline.color color: PaletteDark.darkCyanBlue
)) ))
); );
} }
} }

1
lib/src/screens/dashboard/widgets/sync_indicator.dart
View file

@ -69,6 +69,7 @@ class SyncIndicator extends StatelessWidget {
statusText, statusText,
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 12,
fontWeight: FontWeight.w500,
color: PaletteDark.wildBlue color: PaletteDark.wildBlue
), ),
), ),

122
lib/src/screens/dashboard/widgets/trade_row.dart
View file

@ -1,15 +1,16 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:cake_wallet/src/domain/common/crypto_currency.dart'; import 'package:cake_wallet/src/domain/common/crypto_currency.dart';
import 'package:cake_wallet/src/domain/exchange/exchange_provider_description.dart'; import 'package:cake_wallet/src/domain/exchange/exchange_provider_description.dart';
import 'package:cake_wallet/palette.dart';
class TradeRow extends StatelessWidget { class TradeRow extends StatelessWidget {
TradeRow( TradeRow({
{this.provider, this.provider,
this.from, this.from,
this.to, this.to,
this.createdAtFormattedDate, this.createdAtFormattedDate,
this.formattedAmount, this.formattedAmount,
@required this.onTap}); @required this.onTap});
final VoidCallback onTap; final VoidCallback onTap;
final ExchangeProviderDescription provider; final ExchangeProviderDescription provider;
@ -25,58 +26,53 @@ class TradeRow extends StatelessWidget {
return InkWell( return InkWell(
onTap: onTap, onTap: onTap,
child: Container( child: Container(
height: 60, height: 52,
decoration: BoxDecoration( color: Colors.transparent,
color: Theme.of(context).backgroundColor, padding: EdgeInsets.only(left: 24, right: 24),
border: Border.all( child: Row(
width: 1, crossAxisAlignment: CrossAxisAlignment.center,
color: Theme.of(context).backgroundColor children: <Widget>[
), _getPoweredImage(provider),
), Expanded(
padding: EdgeInsets.only(top: 5, bottom: 5, left: 20, right: 20), child: Padding(
child: Row(children: <Widget>[ padding: const EdgeInsets.only(left: 12),
Container( child: Container(
height: 36, height: 42,
width: 36, child: Column(
decoration: BoxDecoration( mainAxisAlignment: MainAxisAlignment.spaceBetween,
shape: BoxShape.circle, mainAxisSize: MainAxisSize.max,
color: Theme.of(context).backgroundColor children: <Widget>[
), Row(
child: _getPoweredImage(provider), mainAxisAlignment: MainAxisAlignment.spaceBetween,
), children: <Widget>[
Expanded( Text('${from.toString()} → ${to.toString()}',
child: Padding( style: TextStyle(
padding: const EdgeInsets.only(left: 10), fontSize: 16,
child: Column( fontWeight: FontWeight.w500,
children: <Widget>[ color: Colors.white
Row( )),
mainAxisAlignment: MainAxisAlignment.spaceBetween, formattedAmount != null
children: <Widget>[ ? Text(formattedAmount + ' ' + amountCrypto,
Text('${from.toString()} → ${to.toString()}', style: TextStyle(
style: TextStyle( fontSize: 16,
fontSize: 16, fontWeight: FontWeight.w500,
color: Theme.of(context).primaryTextTheme.title.color color: Colors.white
)), ))
formattedAmount != null : Container()
? Text(formattedAmount + ' ' + amountCrypto, ]),
style: TextStyle( Row(
fontSize: 16, mainAxisAlignment: MainAxisAlignment.spaceBetween,
color: Theme.of(context).primaryTextTheme.title.color children: <Widget>[
)) Text(createdAtFormattedDate,
: Container() style: TextStyle(
]), fontSize: 14,
SizedBox(height: 5), color: PaletteDark.darkCyanBlue))
Row( ]),
mainAxisAlignment: MainAxisAlignment.spaceBetween, ],
children: <Widget>[ ),
Text(createdAtFormattedDate, ),
style: TextStyle( ))
fontSize: 14, color: Theme.of(context).primaryTextTheme.headline.color)) ]),
]),
],
),
))
]),
)); ));
} }
@ -84,17 +80,17 @@ class TradeRow extends StatelessWidget {
Image image; Image image;
switch (provider) { switch (provider) {
case ExchangeProviderDescription.xmrto: case ExchangeProviderDescription.xmrto:
image = Image.asset('assets/images/xmr_btc.png'); image = Image.asset('assets/images/xmrto.png', height: 36, width: 36);
break; break;
case ExchangeProviderDescription.changeNow: case ExchangeProviderDescription.changeNow:
image = Image.asset('assets/images/change_now.png'); image = Image.asset('assets/images/changenow.png', height: 36, width: 36);
break; break;
case ExchangeProviderDescription.morphToken: case ExchangeProviderDescription.morphToken:
image = Image.asset('assets/images/morph_icon.png'); image = Image.asset('assets/images/morph.png', height: 36, width: 36);
break; break;
default: default:
image = null; image = null;
} }
return image; return image;
} }
} }

154
lib/src/screens/dashboard/widgets/transaction_raw.dart
View file

@ -4,13 +4,13 @@ import 'package:cake_wallet/src/domain/common/transaction_direction.dart';
import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/generated/i18n.dart';
class TransactionRow extends StatelessWidget { class TransactionRow extends StatelessWidget {
TransactionRow( TransactionRow({
{this.direction, this.direction,
this.formattedDate, this.formattedDate,
this.formattedAmount, this.formattedAmount,
this.formattedFiatAmount, this.formattedFiatAmount,
this.isPending, this.isPending,
@required this.onTap}); @required this.onTap});
final VoidCallback onTap; final VoidCallback onTap;
final TransactionDirection direction; final TransactionDirection direction;
@ -24,78 +24,74 @@ class TransactionRow extends StatelessWidget {
return InkWell( return InkWell(
onTap: onTap, onTap: onTap,
child: Container( child: Container(
height: 41, height: 52,
color: Theme.of(context).backgroundColor, color: Colors.transparent,
padding: EdgeInsets.only(left: 20, right: 20), padding: EdgeInsets.only(left: 24, right: 24),
child: Row(children: <Widget>[ child: Row(
Container( crossAxisAlignment: CrossAxisAlignment.center,
height: 36, children: <Widget>[
width: 36, Container(
decoration: BoxDecoration( height: 36,
shape: BoxShape.circle, width: 36,
color: Theme.of(context).primaryTextTheme.display3.color), decoration: BoxDecoration(
child: Image.asset(direction == TransactionDirection.incoming shape: BoxShape.circle,
? 'assets/images/down_arrow.png' color: PaletteDark.wildNightBlue
: 'assets/images/up_arrow.png'), ),
), child: Image.asset(
Expanded( direction == TransactionDirection.incoming
child: Padding( ? 'assets/images/down_arrow.png'
padding: const EdgeInsets.only(left: 10), : 'assets/images/up_arrow.png'),
child: Column( ),
mainAxisAlignment: MainAxisAlignment.spaceBetween, Expanded(
children: <Widget>[ child: Padding(
Row( padding: const EdgeInsets.only(left: 12),
mainAxisAlignment: MainAxisAlignment.spaceBetween, child: Container(
children: <Widget>[ height: 42,
Text( child: Column(
(direction == TransactionDirection.incoming mainAxisAlignment: MainAxisAlignment.spaceBetween,
? S.of(context).received mainAxisSize: MainAxisSize.max,
: S.of(context).sent) + children: <Widget>[
(isPending ? S.of(context).pending : ''), Row(
style: TextStyle( mainAxisAlignment: MainAxisAlignment.spaceBetween,
fontSize: 16, children: <Widget>[
fontWeight: FontWeight.w500, Text(
color: Theme.of(context) (direction == TransactionDirection.incoming
.primaryTextTheme ? S.of(context).received
.title : S.of(context).sent) +
.color)), (isPending ? S.of(context).pending : ''),
Text( style: TextStyle(
direction == TransactionDirection.incoming fontSize: 16,
? formattedAmount fontWeight: FontWeight.w500,
: '- ' + formattedAmount, color: Colors.white
style: TextStyle( )),
fontSize: 16, Text(direction == TransactionDirection.incoming
fontWeight: FontWeight.w500, ? formattedAmount
color: Theme.of(context) : '- ' + formattedAmount,
.primaryTextTheme style: TextStyle(
.title fontSize: 16,
.color)) fontWeight: FontWeight.w500,
]), color: Colors.white
Row( ))
mainAxisAlignment: MainAxisAlignment.spaceBetween, ]),
children: <Widget>[ Row(
Text(formattedDate, mainAxisAlignment: MainAxisAlignment.spaceBetween,
style: TextStyle( children: <Widget>[
fontSize: 14, Text(formattedDate,
color: Theme.of(context) style: TextStyle(
.primaryTextTheme fontSize: 14,
.headline color: PaletteDark.darkCyanBlue)),
.color)), Text(direction == TransactionDirection.incoming
Text( ? formattedFiatAmount
direction == TransactionDirection.incoming : '- ' + formattedFiatAmount,
? formattedFiatAmount style: TextStyle(
: '- ' + formattedFiatAmount, fontSize: 14,
style: TextStyle( color: PaletteDark.darkCyanBlue))
fontSize: 14, ]),
color: Theme.of(context) ],
.primaryTextTheme ),
.headline ),
.color)) ))
]), ]),
],
),
))
]),
)); ));
} }
} }

4
lib/themes.dart
View file

@ -4,7 +4,7 @@ import 'palette.dart';
class Themes { class Themes {
static final ThemeData lightTheme = ThemeData( static final ThemeData lightTheme = ThemeData(
fontFamily: 'Avenir Next', fontFamily: 'Poppins',
brightness: Brightness.light, brightness: Brightness.light,
backgroundColor: Colors.white, backgroundColor: Colors.white,
focusColor: Colors.white, // wallet card border focusColor: Colors.white, // wallet card border
@ -73,7 +73,7 @@ class Themes {
static final ThemeData darkTheme = ThemeData( static final ThemeData darkTheme = ThemeData(
fontFamily: 'Avenir Next', fontFamily: 'Poppins',
brightness: Brightness.dark, brightness: Brightness.dark,
backgroundColor: PaletteDark.darkNightBlue, backgroundColor: PaletteDark.darkNightBlue,
focusColor: PaletteDark.lightDistantBlue, // wallet card border focusColor: PaletteDark.lightDistantBlue, // wallet card border

5
pubspec.yaml
View file

@ -108,6 +108,11 @@ flutter:
- asset: assets/fonts/Montserrat-Regular.ttf - asset: assets/fonts/Montserrat-Regular.ttf
- asset: assets/fonts/Montserrat-Bold.ttf - asset: assets/fonts/Montserrat-Bold.ttf
- asset: assets/fonts/Montserrat-SemiBold.ttf - asset: assets/fonts/Montserrat-SemiBold.ttf
- family: Poppins
fonts:
- asset: assets/fonts/Poppins-Regular.ttf
- asset: assets/fonts/Poppins-Medium.ttf
- asset: assets/fonts/Poppins-Bold.ttf
# To add assets to your application, add an assets section, like this: # To add assets to your application, add an assets section, like this: