@samitouri / QOSAMI-cakewallet / commits / 6a799df7d

CWA-201 | moved WalletTile class to wallet_tile.dart; changed design for PrimaryImageButton; changed background color for wallet_list_page; added short address to current wallet in the wallet_tile

Oleksandr Sobol committed Apr 24, 2020 at 15:01 UTC 6a799df7dafbeca8594ab0f639afa0dd7270d253
13 files changed +216 -194
assets/images/2.0x/eye_action.png
Binary files /dev/null and b/assets/images/2.0x/eye_action.png differ
assets/images/2.0x/new_wallet.png
Binary files /dev/null and b/assets/images/2.0x/new_wallet.png differ
assets/images/2.0x/restore_wallet.png
Binary files /dev/null and b/assets/images/2.0x/restore_wallet.png differ
assets/images/3.0x/eye_action.png
Binary files /dev/null and b/assets/images/3.0x/eye_action.png differ
assets/images/3.0x/new_wallet.png
Binary files /dev/null and b/assets/images/3.0x/new_wallet.png differ
assets/images/3.0x/restore_wallet.png
Binary files /dev/null and b/assets/images/3.0x/restore_wallet.png differ
assets/images/eye_action.png
Binary files /dev/null and b/assets/images/eye_action.png differ
assets/images/new_wallet.png
Binary files /dev/null and b/assets/images/new_wallet.png differ
assets/images/restore_wallet.png
Binary files /dev/null and b/assets/images/restore_wallet.png differ
lib/src/screens/wallet_list/wallet_list_page.dart
+57 -183
@@ -9,7 +9,9 @@ import 'package:cake_wallet/src/widgets/primary_button.dart';
9 import 'package:cake_wallet/src/screens/base_page.dart';
10 import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
11 import 'package:cake_wallet/src/stores/wallet_list/wallet_list_store.dart';
12 +import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
13 import 'package:cake_wallet/src/screens/wallet_list/wallet_menu.dart';
14 +import 'package:cake_wallet/src/screens/wallet_list/widgets/wallet_tile.dart';
15
16 class WalletListPage extends BasePage {
17
@@ -27,17 +29,20 @@ class WalletListBody extends StatefulWidget {
29
30 class WalletListBodyState extends State<WalletListBody> {
31 final moneroIcon = Image.asset('assets/images/monero.png', height: 24, width: 24);
32 + final newWalletImage = Image.asset('assets/images/new_wallet.png', height: 12, width: 12, color: PaletteDark.historyPanel);
33 + final restoreWalletImage = Image.asset('assets/images/restore_wallet.png', height: 12, width: 12, color: Colors.white,);
34 WalletListStore _walletListStore;
35 ScrollController scrollController = ScrollController();
36
37 @override
38 Widget build(BuildContext context) {
39 + final walletStore = Provider.of<WalletStore>(context);
40 _walletListStore = Provider.of<WalletListStore>(context);
41
42 return SafeArea(
43 child: Container(
44 padding: EdgeInsets.only(top: 32),
40 - color: PaletteDark.menuHeader,
45 + color: PaletteDark.historyPanel,
46 child: ScrollableWithBottomSection(
47 contentPadding: EdgeInsets.only(bottom: 20),
48 content: Container(
@@ -46,7 +51,7 @@ class WalletListBodyState extends State<WalletListBody> {
51 shrinkWrap: true,
52 physics: const NeverScrollableScrollPhysics(),
53 separatorBuilder: (_, index) => Divider(
49 - color: PaletteDark.menuHeader, height: 16),
54 + color: PaletteDark.historyPanel, height: 16),
55 itemCount: _walletListStore.wallets.length,
56 itemBuilder: (__, index) {
57 final wallet = _walletListStore.wallets[index];
@@ -55,6 +60,13 @@ class WalletListBodyState extends State<WalletListBody> {
60 final isCurrentWallet =
61 _walletListStore.isCurrentWallet(wallet);
62
63 + String shortAddress = '';
64 +
65 + if (isCurrentWallet) {
66 + shortAddress = walletStore.subaddress.address;
67 + shortAddress = shortAddress.replaceRange(4, shortAddress.length - 4, '...');
68 + }
69 +
70 final walletMenu = WalletMenu(context);
71 final items = walletMenu.generateItemsForWalletMenu(isCurrentWallet);
72 final colors = walletMenu.generateColorsForWalletMenu(isCurrentWallet);
@@ -75,7 +87,7 @@ class WalletListBodyState extends State<WalletListBody> {
87 max: screenWidth,
88 image: moneroIcon,
89 walletName: wallet.name,
78 - walletAddress: '',
90 + walletAddress: shortAddress,
91 isCurrent: isCurrentWallet
92 ),
93 ),
@@ -87,49 +99,7 @@ class WalletListBodyState extends State<WalletListBody> {
99 final color = colors[index];
100 final image = images[index];
101
90 - final content = Center(
91 - child: Column(
92 - mainAxisSize: MainAxisSize.min,
93 - children: <Widget>[
94 - image,
95 - SizedBox(height: 5),
96 - Text(
97 - item,
98 - textAlign: TextAlign.center,
99 - style: TextStyle(
100 - fontSize: 12,
101 - color: Colors.white
102 - ),
103 - )
104 - ],
105 - ),
106 - );
107 -
108 - if (index == 0) {
109 - return GestureDetector(
110 - onTap: () {
111 - scrollController.animateTo(0.0, duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
112 - walletMenu.action(
113 - walletMenu.listItems.indexOf(item), wallet, isCurrentWallet);
114 - },
115 - child: Container(
116 - height: 108,
117 - width: 108,
118 - color: PaletteDark.menuHeader,
119 - child: Container(
120 - padding: EdgeInsets.only(left: 5, right: 5),
121 - decoration: BoxDecoration(
122 - borderRadius: BorderRadius.only(
123 - topLeft: Radius.circular(12),
124 - bottomLeft: Radius.circular(12)
125 - ),
126 - color: color
127 - ),
128 - child: content,
129 - ),
130 - ),
131 - );
132 - }
102 + final radius = index == 0 ? 12.0 : 0.0;
103
104 return GestureDetector(
105 onTap: () {
@@ -140,9 +110,34 @@ class WalletListBodyState extends State<WalletListBody> {
110 child: Container(
111 height: 108,
112 width: 108,
143 - padding: EdgeInsets.only(left: 5, right: 5),
144 - color: color,
145 - child: content,
113 + color: PaletteDark.historyPanel,
114 + child: Container(
115 + padding: EdgeInsets.only(left: 5, right: 5),
116 + decoration: BoxDecoration(
117 + borderRadius: BorderRadius.only(
118 + topLeft: Radius.circular(radius),
119 + bottomLeft: Radius.circular(radius)
120 + ),
121 + color: color
122 + ),
123 + child: Center(
124 + child: Column(
125 + mainAxisSize: MainAxisSize.min,
126 + children: <Widget>[
127 + image,
128 + SizedBox(height: 5),
129 + Text(
130 + item,
131 + textAlign: TextAlign.center,
132 + style: TextStyle(
133 + fontSize: 12,
134 + color: Colors.white
135 + ),
136 + )
137 + ],
138 + ),
139 + ),
140 + ),
141 ),
142 );
143 },
@@ -156,143 +151,22 @@ class WalletListBodyState extends State<WalletListBody> {
151 ),
152 ),
153 bottomSection: Column(children: <Widget>[
159 - PrimaryIconButton(
160 - onPressed: () => Navigator.of(context).pushNamed(Routes.newWallet),
161 - iconData: Icons.add,
162 - color: Theme.of(context).primaryTextTheme.button.backgroundColor,
163 - borderColor:
164 - Theme.of(context).primaryTextTheme.button.decorationColor,
165 - iconColor: Palette.violet,
166 - iconBackgroundColor: Theme.of(context).primaryIconTheme.color,
167 - text: S.of(context).wallet_list_create_new_wallet),
154 + PrimaryImageButton(
155 + onPressed: () => Navigator.of(context).pushNamed(Routes.newWallet),
156 + image: newWalletImage,
157 + text: S.of(context).wallet_list_create_new_wallet,
158 + color: Colors.white,
159 + textColor: PaletteDark.historyPanel),
160 SizedBox(height: 10.0),
169 - PrimaryIconButton(
170 - onPressed: () =>
171 - Navigator.of(context).pushNamed(Routes.restoreWalletOptions),
172 - iconData: Icons.refresh,
173 - text: S.of(context).wallet_list_restore_wallet,
174 - color: Theme.of(context).accentTextTheme.button.backgroundColor,
175 - borderColor:
176 - Theme.of(context).accentTextTheme.button.decorationColor,
177 - iconColor: Theme.of(context).primaryTextTheme.caption.color,
178 - iconBackgroundColor: Theme.of(context).accentIconTheme.color)
161 + PrimaryImageButton(
162 + onPressed: () =>
163 + Navigator.of(context).pushNamed(Routes.restoreWalletOptions),
164 + image: restoreWalletImage,
165 + text: S.of(context).wallet_list_restore_wallet,
166 + color: PaletteDark.historyPanelButton,
167 + textColor: Colors.white)
168 ])),
169 )
170 );
171 }
172 }
184 -
185 -class WalletTile extends SliverPersistentHeaderDelegate {
186 - WalletTile({
187 - @required this.min,
188 - @required this.max,
189 - @required this.image,
190 - @required this.walletName,
191 - @required this.walletAddress,
192 - @required this.isCurrent
193 - });
194 -
195 - final double min;
196 - final double max;
197 - final Image image;
198 - final String walletName;
199 - final String walletAddress;
200 - final bool isCurrent;
201 -
202 - @override
203 - Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
204 -
205 - double opacity = 1 - shrinkOffset / (max - min);
206 - opacity = opacity >= 0 ? opacity : 0;
207 -
208 - double panelWidth = 12 * opacity;
209 - panelWidth = panelWidth < 12 ? 0 : 12;
210 -
211 - final currentColor = isCurrent
212 - ? Colors.white
213 - : PaletteDark.menuHeader;
214 -
215 - return Stack(
216 - fit: StackFit.expand,
217 - overflow: Overflow.visible,
218 - children: <Widget>[
219 - Positioned(
220 - top: 0,
221 - right: max - 4,
222 - child: Container(
223 - height: 108,
224 - width: 4,
225 - decoration: BoxDecoration(
226 - borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)),
227 - color: currentColor
228 - ),
229 - ),
230 - ),
231 - Positioned(
232 - top: 0,
233 - right: 12,
234 - child: Container(
235 - height: 108,
236 - width: max - 16,
237 - padding: EdgeInsets.only(left: 20, right: 20),
238 - color: PaletteDark.menuHeader,
239 - child: Column(
240 - mainAxisSize: MainAxisSize.max,
241 - mainAxisAlignment: MainAxisAlignment.center,
242 - children: <Widget>[
243 - Row(
244 - mainAxisAlignment: MainAxisAlignment.start,
245 - crossAxisAlignment: CrossAxisAlignment.center,
246 - children: <Widget>[
247 - image,
248 - SizedBox(width: 10),
249 - Text(
250 - walletName,
251 - style: TextStyle(
252 - fontSize: 22,
253 - fontWeight: FontWeight.bold,
254 - color: Colors.white
255 - ),
256 - )
257 - ],
258 - )
259 - ],
260 - ),
261 - ),
262 - ),
263 - Positioned(
264 - top: 0,
265 - right: 0,
266 - child: Opacity(
267 - opacity: opacity,
268 - child: Container(
269 - height: 108,
270 - width: panelWidth,
271 - decoration: BoxDecoration(
272 - borderRadius: BorderRadius.only(topLeft: Radius.circular(12), bottomLeft: Radius.circular(12)),
273 - gradient: LinearGradient(
274 - begin: Alignment.topCenter,
275 - end: Alignment.bottomCenter,
276 - colors: [
277 - PaletteDark.walletCardTopEndSync,
278 - PaletteDark.walletCardBottomEndSync
279 - ]
280 - )
281 - ),
282 - ),
283 - )
284 - ),
285 - ],
286 - );
287 - }
288 -
289 - @override
290 - double get maxExtent => max;
291 -
292 - @override
293 - double get minExtent => min;
294 -
295 - @override
296 - bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
297 -
298 -}
lib/src/screens/wallet_list/wallet_menu.dart
+1 -1
@@ -27,7 +27,7 @@ class WalletMenu {
27
28 final List<Image> listImages = [
29 Image.asset('assets/images/load.png', height: 32, width: 32, color: Colors.white),
30 - Image.asset('assets/images/eye.png', height: 32, width: 32, color: Colors.white),
30 + Image.asset('assets/images/eye_action.png', height: 32, width: 32, color: Colors.white),
31 Image.asset('assets/images/trash.png', height: 32, width: 32, color: Colors.white),
32 Image.asset('assets/images/scanner.png', height: 32, width: 32, color: Colors.white)
33 ];
lib/src/screens/wallet_list/widgets/wallet_tile.dart new
+135
@@ -0,0 +1,135 @@
1 +import 'package:flutter/material.dart';
2 +import 'package:flutter/cupertino.dart';
3 +import 'package:cake_wallet/palette.dart';
4 +
5 +class WalletTile extends SliverPersistentHeaderDelegate {
6 + WalletTile({
7 + @required this.min,
8 + @required this.max,
9 + @required this.image,
10 + @required this.walletName,
11 + @required this.walletAddress,
12 + @required this.isCurrent
13 + });
14 +
15 + final double min;
16 + final double max;
17 + final Image image;
18 + final String walletName;
19 + final String walletAddress;
20 + final bool isCurrent;
21 +
22 + @override
23 + Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
24 +
25 + double opacity = 1 - shrinkOffset / (max - min);
26 + opacity = opacity >= 0 ? opacity : 0;
27 +
28 + double panelWidth = 12 * opacity;
29 + panelWidth = panelWidth < 12 ? 0 : 12;
30 +
31 + final currentColor = isCurrent
32 + ? Colors.white
33 + : PaletteDark.historyPanel;
34 +
35 + return Stack(
36 + fit: StackFit.expand,
37 + overflow: Overflow.visible,
38 + children: <Widget>[
39 + Positioned(
40 + top: 0,
41 + right: max - 4,
42 + child: Container(
43 + height: 108,
44 + width: 4,
45 + decoration: BoxDecoration(
46 + borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)),
47 + color: currentColor
48 + ),
49 + ),
50 + ),
51 + Positioned(
52 + top: 0,
53 + right: 12,
54 + child: Container(
55 + height: 108,
56 + width: max - 16,
57 + padding: EdgeInsets.only(left: 20, right: 20),
58 + color: PaletteDark.historyPanel,
59 + child: Column(
60 + mainAxisSize: MainAxisSize.max,
61 + mainAxisAlignment: MainAxisAlignment.center,
62 + children: <Widget>[
63 + Row(
64 + mainAxisAlignment: MainAxisAlignment.start,
65 + crossAxisAlignment: CrossAxisAlignment.center,
66 + children: <Widget>[
67 + image,
68 + SizedBox(width: 10),
69 + Text(
70 + walletName,
71 + style: TextStyle(
72 + fontSize: 22,
73 + fontWeight: FontWeight.bold,
74 + color: Colors.white
75 + ),
76 + )
77 + ],
78 + ),
79 + isCurrent ? SizedBox(height: 5) : Offstage(),
80 + isCurrent
81 + ? Row(
82 + mainAxisAlignment: MainAxisAlignment.start,
83 + crossAxisAlignment: CrossAxisAlignment.center,
84 + children: <Widget>[
85 + SizedBox(width: 34),
86 + Text(
87 + walletAddress,
88 + style: TextStyle(
89 + fontSize: 12,
90 + color: PaletteDark.walletCardText
91 + ),
92 + )
93 + ],
94 + )
95 + : Offstage()
96 + ],
97 + ),
98 + ),
99 + ),
100 + Positioned(
101 + top: 0,
102 + right: 0,
103 + child: Opacity(
104 + opacity: opacity,
105 + child: Container(
106 + height: 108,
107 + width: panelWidth,
108 + decoration: BoxDecoration(
109 + borderRadius: BorderRadius.only(topLeft: Radius.circular(12), bottomLeft: Radius.circular(12)),
110 + gradient: LinearGradient(
111 + begin: Alignment.topCenter,
112 + end: Alignment.bottomCenter,
113 + colors: [
114 + PaletteDark.walletCardTopEndSync,
115 + PaletteDark.walletCardBottomEndSync
116 + ]
117 + )
118 + ),
119 + ),
120 + )
121 + ),
122 + ],
123 + );
124 + }
125 +
126 + @override
127 + double get maxExtent => max;
128 +
129 + @override
130 + double get minExtent => min;
131 +
132 + @override
133 + bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
134 +
135 +}
\ No newline at end of file
lib/src/widgets/primary_button.dart
+23 -10
@@ -143,29 +143,42 @@ class PrimaryImageButton extends StatelessWidget {
143 {@required this.onPressed,
144 @required this.image,
145 @required this.text,
146 - this.color = Palette.purple,
147 - this.borderColor = Palette.deepPink,
148 - this.iconColor = Colors.black});
146 + @required this.color,
147 + @required this.textColor});
148
149 final VoidCallback onPressed;
150 final Image image;
151 final Color color;
153 - final Color borderColor;
154 - final Color iconColor;
152 + final Color textColor;
153 final String text;
154
155 @override
156 Widget build(BuildContext context) {
157 return ButtonTheme(
158 minWidth: double.infinity,
161 - height: 58.0,
159 + height: 52.0,
160 child: FlatButton(
161 onPressed: onPressed,
162 color: color,
163 shape: RoundedRectangleBorder(
166 - side: BorderSide(color: borderColor),
167 - borderRadius: BorderRadius.circular(12.0)),
168 - child: Row(
164 + borderRadius: BorderRadius.circular(26.0)),
165 + child:Center(
166 + child: Row(
167 + mainAxisSize: MainAxisSize.min,
168 + children: <Widget>[
169 + image,
170 + SizedBox(width: 15),
171 + Text(
172 + text,
173 + style: TextStyle(
174 + fontSize: 15,
175 + color: textColor
176 + ),
177 + )
178 + ],
179 + ),
180 + )
181 + /*Row(
182 children: <Widget>[
183 Container(
184 width: 28.0,
@@ -192,7 +205,7 @@ class PrimaryImageButton extends StatelessWidget {
205 )
206 ]))
207 ],
195 - ),
208 + ),*/
209 ));
210 }
211 }