From 93b8bd8a3552c4cc54aa8e9483ce51d11414f4cf Mon Sep 17 00:00:00 2001 From: Oleksandr Sobol Date: Tue, 14 Apr 2020 21:15:47 +0300 Subject: [PATCH] CWA-198 | created wallet card --- assets/images/2.0x/triangle.png | Bin 0 -> 202 bytes assets/images/3.0x/triangle.png | Bin 0 -> 242 bytes assets/images/triangle.png | Bin 0 -> 193 bytes lib/palette.dart | 9 + lib/src/screens/dashboard/dashboard_page.dart | 35 +++- .../dashboard/widgets/wallet_card.dart | 198 ++++++++++++++++++ 6 files changed, 236 insertions(+), 6 deletions(-) create mode 100644 assets/images/2.0x/triangle.png create mode 100644 assets/images/3.0x/triangle.png create mode 100644 assets/images/triangle.png create mode 100644 lib/src/screens/dashboard/widgets/wallet_card.dart diff --git a/assets/images/2.0x/triangle.png b/assets/images/2.0x/triangle.png new file mode 100644 index 0000000000000000000000000000000000000000..1a7baf26d5adefdb60b7134fd807e65eedc6ba7c GIT binary patch literal 202 zcmeAS@N?(olHy`uVBq!ia0vp^f*{Pn1|+R>-G2co&H|6fVg?2=RS;(M3{v?36l5$8 za(7}_cTVOdki(Mh=XR_&!bG7o(^V sLuf;{iGnzXAUjuM9^1<)(md9T$GFUP{$_}O3$%*C)78&qol`;+0J$bP0l+XkK8V^!6 literal 0 HcmV?d00001 diff --git a/assets/images/triangle.png b/assets/images/triangle.png new file mode 100644 index 0000000000000000000000000000000000000000..0c48a2465f6c29d22b3caa087ec1255cbd839954 GIT binary patch literal 193 zcmeAS@N?(olHy`uVBq!ia0vp^oFL4>1|%O$WD@{!3Opi<85p>QL70(Y)*K0-AY*Zm zyA#8@b22Z19F}xPUq=Rpjs4tz5?O)#Fi#i9kP61LJsWu&40u@n3NZ&f(&RIp null; @override Widget body(BuildContext context) => DashboardPageBody(key: _bodyKey); - @override + /*@override Widget floatingActionButton(BuildContext context) => FloatingActionButton( child: Image.asset('assets/images/exchange_icon.png', color: Colors.white, height: 26, width: 22), @@ -100,7 +103,7 @@ class DashboardPage extends BasePage { onItemSelected: (String item) => walletMenu.action(walletMenu.items.indexOf(item))), context: bodyContext); - } + }*/ } class DashboardPageBody extends StatefulWidget { @@ -120,7 +123,27 @@ class DashboardPageBodyState extends State { @override Widget build(BuildContext context) { - final balanceStore = Provider.of(context); + final List colors = [PaletteDark.backgroundStart, PaletteDark.backgroundEnd]; + + return SafeArea( + child: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: colors + ) + ), + child: Column( + children: [ + Padding( + padding: EdgeInsets.only(left: 20, top: 78), + child: WalletCard(), + ) + ], + ), + ), + ); + + /*final balanceStore = Provider.of(context); final actionListStore = Provider.of(context); final syncStore = Provider.of(context); final settingsStore = Provider.of(context); @@ -593,6 +616,6 @@ class DashboardPageBodyState extends State { return Container(); }); - }); + });*/ } } diff --git a/lib/src/screens/dashboard/widgets/wallet_card.dart b/lib/src/screens/dashboard/widgets/wallet_card.dart new file mode 100644 index 000000000..0bf8ae34d --- /dev/null +++ b/lib/src/screens/dashboard/widgets/wallet_card.dart @@ -0,0 +1,198 @@ +import 'package:cake_wallet/src/stores/sync/sync_store.dart'; +import 'package:cake_wallet/src/stores/wallet/wallet_store.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_mobx/flutter_mobx.dart'; +import 'package:cake_wallet/palette.dart'; +import 'package:provider/provider.dart'; +import 'package:cake_wallet/generated/i18n.dart'; +import 'package:cake_wallet/src/domain/common/sync_status.dart'; + +class WalletCard extends StatefulWidget { + @override + WalletCardState createState() => WalletCardState(); +} + +class WalletCardState extends State { + final _syncingObserverKey = GlobalKey(); + final triangleButton = Image.asset('assets/images/triangle.png'); + + final List colorsSync = [PaletteDark.walletCardTopEndSync, PaletteDark.walletCardBottomEndSync]; + double cardWidth; + double screenWidth; + double opacity; + + @override + void initState() { + cardWidth = 0; + screenWidth = 0; + opacity = 0; + super.initState(); + WidgetsBinding.instance.addPostFrameCallback(afterLayout); + } + + void afterLayout(dynamic _) { + screenWidth = MediaQuery.of(context).size.width; + setState(() { + cardWidth = screenWidth; + opacity = 1; + }); + } + + @override + Widget build(BuildContext context) { + final syncStore = Provider.of(context); + final walletStore = Provider.of(context); + + return Container( + width: double.infinity, + height: 220, + alignment: Alignment.centerRight, + child: AnimatedContainer( + alignment: Alignment.centerLeft, + width: cardWidth, + height: 220, + duration: Duration(milliseconds: 500), + curve: Curves.fastOutSlowIn, + decoration: BoxDecoration( + borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)), + gradient: LinearGradient( + colors: [PaletteDark.walletCardTopStartSync.withOpacity(opacity), + PaletteDark.walletCardBottomStartSync.withOpacity(opacity)], + begin: Alignment.topCenter, + end: Alignment.bottomCenter + ) + ), + child: screenWidth > 0 && cardWidth == screenWidth + ? InkWell( + onTap: (){print('TAP');}, + child: Observer( + key: _syncingObserverKey, + builder: (_) { + final status = syncStore.status; + final statusText = status.title(); + final progress = syncStore.status.progress(); + //final isFialure = status is FailedSyncStatus; + + var descriptionText = ''; + + if (status is SyncingSyncStatus) { + descriptionText = S + .of(context) + .Blocks_remaining( + syncStore.status.toString()); + } + + if (status is FailedSyncStatus) { + descriptionText = S + .of(context) + .please_try_to_connect_to_another_node; + } + + return Container( + width: cardWidth, + height: 220, + child: Stack( + children: [ + Container( + height: 220, + width: progress * cardWidth, + decoration: BoxDecoration( + borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)), + gradient: LinearGradient( + colors: colorsSync, + begin: Alignment.topCenter, + end: Alignment.bottomCenter + ) + ), + ), + Positioned( + left: 20, + right: 20, + top: 30, + bottom: 30, + child: Container( + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + InkWell( + onTap: (){print('TAP 2');}, + child: Row( + children: [ + Text( + walletStore.name, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold + ), + ), + SizedBox(width: 10), + triangleButton + ], + ), + ), + SizedBox( + height: 5, + ), + Text( + walletStore.account.label, + style: TextStyle( + fontSize: 12 + ), + ) + ], + ), + Text( + walletStore.account.label + ) + ], + ), + Row( + crossAxisAlignment: CrossAxisAlignment.end, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + statusText, + style: TextStyle( + fontSize: 12 + ), + ), + SizedBox(height: 5), + Text( + descriptionText, + style: TextStyle( + fontSize: 14 + ), + ) + ], + ), + Text( + walletStore.account.label + ) + ], + ) + ], + ), + ) + ) + ], + ), + ); + }, + ) + ) + : Offstage(), + ), + ); + } +} \ No newline at end of file