@samitouri / QOSAMI-cakewallet / commits / 93b8bd8a3

CWA-198 | created wallet card

Oleksandr Sobol committed Apr 14, 2020 at 21:15 UTC 93b8bd8a3552c4cc54aa8e9483ce51d11414f4cf
6 files changed +236 -6
assets/images/2.0x/triangle.png
Binary files /dev/null and b/assets/images/2.0x/triangle.png differ
assets/images/3.0x/triangle.png
Binary files /dev/null and b/assets/images/3.0x/triangle.png differ
assets/images/triangle.png
Binary files /dev/null and b/assets/images/triangle.png differ
lib/palette.dart
+9
@@ -69,4 +69,13 @@ class PaletteDark {
69 static const Color switchBackground = Color.fromRGBO(100, 115, 137, 0.4);
70 static const Color wildDarkBlueWithOpacity = Color.fromRGBO(155, 172, 197, 0.4);
71 static const Color wildDarkBlue = Color.fromRGBO(155, 172, 197, 0.8);
72 +
73 + // NEW
74 +
75 + static const Color backgroundStart = Color.fromRGBO(231, 240, 253, 1.0);
76 + static const Color backgroundEnd = Color.fromRGBO(172, 203, 238, 1.0);
77 + static const Color walletCardTopStartSync = Color.fromRGBO(89, 104, 152, 1.0);
78 + static const Color walletCardBottomStartSync = Color.fromRGBO(70, 85, 133, 1.0);
79 + static const Color walletCardTopEndSync = Color.fromRGBO(70, 85, 133, 1.0);
80 + static const Color walletCardBottomEndSync = Color.fromRGBO(45, 56, 95, 1.0);
81 }
\ No newline at end of file
lib/src/screens/dashboard/dashboard_page.dart
+29 -6
@@ -24,11 +24,12 @@ import 'package:cake_wallet/src/screens/dashboard/transaction_raw.dart';
24 import 'package:cake_wallet/src/widgets/primary_button.dart';
25 import 'package:cake_wallet/src/screens/dashboard/wallet_menu.dart';
26 import 'package:cake_wallet/src/widgets/picker.dart';
27 +import 'package:cake_wallet/src/screens/dashboard/widgets/wallet_card.dart';
28
29 class DashboardPage extends BasePage {
30 final _bodyKey = GlobalKey();
31
31 - @override
32 + /*@override
33 Widget leading(BuildContext context) {
34 return SizedBox(
35 width: 30,
@@ -75,12 +76,14 @@ class DashboardPage extends BasePage {
76 child: Image.asset('assets/images/settings_icon.png',
77 color: Colors.grey, height: 20)),
78 );
78 - }
79 + }*/
80 + @override
81 + ObstructingPreferredSizeWidget appBar(BuildContext context) => null;
82
83 @override
84 Widget body(BuildContext context) => DashboardPageBody(key: _bodyKey);
85
83 - @override
86 + /*@override
87 Widget floatingActionButton(BuildContext context) => FloatingActionButton(
88 child: Image.asset('assets/images/exchange_icon.png',
89 color: Colors.white, height: 26, width: 22),
@@ -100,7 +103,7 @@ class DashboardPage extends BasePage {
103 onItemSelected: (String item) =>
104 walletMenu.action(walletMenu.items.indexOf(item))),
105 context: bodyContext);
103 - }
106 + }*/
107 }
108
109 class DashboardPageBody extends StatefulWidget {
@@ -120,7 +123,27 @@ class DashboardPageBodyState extends State<DashboardPageBody> {
123
124 @override
125 Widget build(BuildContext context) {
123 - final balanceStore = Provider.of<BalanceStore>(context);
126 + final List<Color> colors = [PaletteDark.backgroundStart, PaletteDark.backgroundEnd];
127 +
128 + return SafeArea(
129 + child: Container(
130 + decoration: BoxDecoration(
131 + gradient: LinearGradient(
132 + colors: colors
133 + )
134 + ),
135 + child: Column(
136 + children: <Widget>[
137 + Padding(
138 + padding: EdgeInsets.only(left: 20, top: 78),
139 + child: WalletCard(),
140 + )
141 + ],
142 + ),
143 + ),
144 + );
145 +
146 + /*final balanceStore = Provider.of<BalanceStore>(context);
147 final actionListStore = Provider.of<ActionListStore>(context);
148 final syncStore = Provider.of<SyncStore>(context);
149 final settingsStore = Provider.of<SettingsStore>(context);
@@ -593,6 +616,6 @@ class DashboardPageBodyState extends State<DashboardPageBody> {
616
617 return Container();
618 });
596 - });
619 + });*/
620 }
621 }
lib/src/screens/dashboard/widgets/wallet_card.dart new
+198
@@ -0,0 +1,198 @@
1 +import 'package:cake_wallet/src/stores/sync/sync_store.dart';
2 +import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
3 +import 'package:flutter/cupertino.dart';
4 +import 'package:flutter/material.dart';
5 +import 'package:flutter_mobx/flutter_mobx.dart';
6 +import 'package:cake_wallet/palette.dart';
7 +import 'package:provider/provider.dart';
8 +import 'package:cake_wallet/generated/i18n.dart';
9 +import 'package:cake_wallet/src/domain/common/sync_status.dart';
10 +
11 +class WalletCard extends StatefulWidget {
12 + @override
13 + WalletCardState createState() => WalletCardState();
14 +}
15 +
16 +class WalletCardState extends State<WalletCard> {
17 + final _syncingObserverKey = GlobalKey();
18 + final triangleButton = Image.asset('assets/images/triangle.png');
19 +
20 + final List<Color> colorsSync = [PaletteDark.walletCardTopEndSync, PaletteDark.walletCardBottomEndSync];
21 + double cardWidth;
22 + double screenWidth;
23 + double opacity;
24 +
25 + @override
26 + void initState() {
27 + cardWidth = 0;
28 + screenWidth = 0;
29 + opacity = 0;
30 + super.initState();
31 + WidgetsBinding.instance.addPostFrameCallback(afterLayout);
32 + }
33 +
34 + void afterLayout(dynamic _) {
35 + screenWidth = MediaQuery.of(context).size.width;
36 + setState(() {
37 + cardWidth = screenWidth;
38 + opacity = 1;
39 + });
40 + }
41 +
42 + @override
43 + Widget build(BuildContext context) {
44 + final syncStore = Provider.of<SyncStore>(context);
45 + final walletStore = Provider.of<WalletStore>(context);
46 +
47 + return Container(
48 + width: double.infinity,
49 + height: 220,
50 + alignment: Alignment.centerRight,
51 + child: AnimatedContainer(
52 + alignment: Alignment.centerLeft,
53 + width: cardWidth,
54 + height: 220,
55 + duration: Duration(milliseconds: 500),
56 + curve: Curves.fastOutSlowIn,
57 + decoration: BoxDecoration(
58 + borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
59 + gradient: LinearGradient(
60 + colors: [PaletteDark.walletCardTopStartSync.withOpacity(opacity),
61 + PaletteDark.walletCardBottomStartSync.withOpacity(opacity)],
62 + begin: Alignment.topCenter,
63 + end: Alignment.bottomCenter
64 + )
65 + ),
66 + child: screenWidth > 0 && cardWidth == screenWidth
67 + ? InkWell(
68 + onTap: (){print('TAP');},
69 + child: Observer(
70 + key: _syncingObserverKey,
71 + builder: (_) {
72 + final status = syncStore.status;
73 + final statusText = status.title();
74 + final progress = syncStore.status.progress();
75 + //final isFialure = status is FailedSyncStatus;
76 +
77 + var descriptionText = '';
78 +
79 + if (status is SyncingSyncStatus) {
80 + descriptionText = S
81 + .of(context)
82 + .Blocks_remaining(
83 + syncStore.status.toString());
84 + }
85 +
86 + if (status is FailedSyncStatus) {
87 + descriptionText = S
88 + .of(context)
89 + .please_try_to_connect_to_another_node;
90 + }
91 +
92 + return Container(
93 + width: cardWidth,
94 + height: 220,
95 + child: Stack(
96 + children: <Widget>[
97 + Container(
98 + height: 220,
99 + width: progress * cardWidth,
100 + decoration: BoxDecoration(
101 + borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
102 + gradient: LinearGradient(
103 + colors: colorsSync,
104 + begin: Alignment.topCenter,
105 + end: Alignment.bottomCenter
106 + )
107 + ),
108 + ),
109 + Positioned(
110 + left: 20,
111 + right: 20,
112 + top: 30,
113 + bottom: 30,
114 + child: Container(
115 + child: Column(
116 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
117 + children: <Widget>[
118 + Row(
119 + crossAxisAlignment: CrossAxisAlignment.start,
120 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
121 + children: <Widget>[
122 + Column(
123 + crossAxisAlignment: CrossAxisAlignment.start,
124 + children: <Widget>[
125 + InkWell(
126 + onTap: (){print('TAP 2');},
127 + child: Row(
128 + children: <Widget>[
129 + Text(
130 + walletStore.name,
131 + style: TextStyle(
132 + fontSize: 20,
133 + fontWeight: FontWeight.bold
134 + ),
135 + ),
136 + SizedBox(width: 10),
137 + triangleButton
138 + ],
139 + ),
140 + ),
141 + SizedBox(
142 + height: 5,
143 + ),
144 + Text(
145 + walletStore.account.label,
146 + style: TextStyle(
147 + fontSize: 12
148 + ),
149 + )
150 + ],
151 + ),
152 + Text(
153 + walletStore.account.label
154 + )
155 + ],
156 + ),
157 + Row(
158 + crossAxisAlignment: CrossAxisAlignment.end,
159 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
160 + children: <Widget>[
161 + Column(
162 + crossAxisAlignment: CrossAxisAlignment.start,
163 + children: <Widget>[
164 + Text(
165 + statusText,
166 + style: TextStyle(
167 + fontSize: 12
168 + ),
169 + ),
170 + SizedBox(height: 5),
171 + Text(
172 + descriptionText,
173 + style: TextStyle(
174 + fontSize: 14
175 + ),
176 + )
177 + ],
178 + ),
179 + Text(
180 + walletStore.account.label
181 + )
182 + ],
183 + )
184 + ],
185 + ),
186 + )
187 + )
188 + ],
189 + ),
190 + );
191 + },
192 + )
193 + )
194 + : Offstage(),
195 + ),
196 + );
197 + }
198 +}
\ No newline at end of file