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
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 wildNightBlue = Color.fromRGBO(39, 53, 96, 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 brightGreen = Color.fromRGBO(88, 243, 50, 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/view_model/wallet_new_vm.dart';
import 'package:cake_wallet/view_model/wallet_restoration_from_seed_vm.dart';
@ -249,13 +250,7 @@ class Router {
case Routes.dashboard:
return CupertinoPageRoute<void>(
builder: (_) => createDashboardPage(
walletService: walletService,
priceStore: priceStore,
settingsStore: settingsStore,
trades: trades,
transactionDescriptions: transactionDescriptions,
walletStore: walletStore));
builder: (_) => getIt.get<DashboardPage>());
case Routes.send:
return CupertinoPageRoute<void>(

18
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:flutter_mobx/flutter_mobx.dart';
import 'package:mobx/mobx.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.dart';
class DashboardPage extends BasePage {
DashboardPage({@required this.walletViewModel});
@ -21,6 +22,11 @@ class DashboardPage extends BasePage {
@override
Color get backgroundDarkColor => PaletteDark.backgroundColor;
@override
Widget middle(BuildContext context) {
return SyncIndicator(dashboardViewModel: walletViewModel);
}
@override
Widget trailing(BuildContext context) {
final menuButton = Image.asset('assets/images/menu.png',
@ -28,13 +34,9 @@ class DashboardPage extends BasePage {
return Container(
alignment: Alignment.centerRight,
child: SizedBox(
width: 20,
child: FlatButton(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
padding: EdgeInsets.all(0),
onPressed: () async {
width: 40,
child: InkWell(
onTap: () async {
await showDialog<void>(
builder: (_) => MenuWidget(
name: walletViewModel.name,
@ -42,7 +44,7 @@ class DashboardPage extends BasePage {
type: walletViewModel.type),
context: context);
},
child: menuButton),
child: menuButton
),
);
}

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

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

14
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:provider/provider.dart';
import 'package:cake_wallet/src/stores/settings/settings_store.dart';
import 'package:cake_wallet/palette.dart';
class DateSectionRaw extends StatelessWidget {
DateSectionRaw({this.date});
@ -35,20 +36,13 @@ class DateSectionRaw extends StatelessWidget {
}
return Container(
height: 36,
padding: EdgeInsets.only(top: 10, bottom: 10, left: 20, right: 20),
height: 35,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Theme.of(context).backgroundColor,
border: Border.all(
width: 1,
color: Theme.of(context).backgroundColor
),
),
color: Colors.transparent,
child: Text(title,
style: TextStyle(
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,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: PaletteDark.wildBlue
),
),

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

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

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

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

4
lib/themes.dart
View file

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