CWA-198 | implemented menu screen; added menu widget; added images to menu items and fixed menu actions

Oleksandr Sobol committed Apr 21, 2020 at 21:23 UTC fa696c2a6044b6769319be9bb327af03ca856d41
28 files changed +230 -9
assets/images/2.0x/eye.png
Binary files /dev/null and b/assets/images/2.0x/eye.png differ
assets/images/2.0x/key.png
Binary files /dev/null and b/assets/images/2.0x/key.png differ
assets/images/2.0x/monero.png
Binary files /dev/null and b/assets/images/2.0x/monero.png differ
assets/images/2.0x/nodes.png
Binary files /dev/null and b/assets/images/2.0x/nodes.png differ
assets/images/2.0x/open_book.png
Binary files /dev/null and b/assets/images/2.0x/open_book.png differ
assets/images/2.0x/reconnect.png
Binary files /dev/null and b/assets/images/2.0x/reconnect.png differ
assets/images/2.0x/settings.png
Binary files /dev/null and b/assets/images/2.0x/settings.png differ
assets/images/2.0x/wallet.png
Binary files /dev/null and b/assets/images/2.0x/wallet.png differ
assets/images/3.0x/eye.png
Binary files /dev/null and b/assets/images/3.0x/eye.png differ
assets/images/3.0x/key.png
Binary files /dev/null and b/assets/images/3.0x/key.png differ
assets/images/3.0x/monero.png
Binary files /dev/null and b/assets/images/3.0x/monero.png differ
assets/images/3.0x/nodes.png
Binary files /dev/null and b/assets/images/3.0x/nodes.png differ
assets/images/3.0x/open_book.png
Binary files /dev/null and b/assets/images/3.0x/open_book.png differ
assets/images/3.0x/reconnect.png
Binary files /dev/null and b/assets/images/3.0x/reconnect.png differ
assets/images/3.0x/settings.png
Binary files /dev/null and b/assets/images/3.0x/settings.png differ
assets/images/3.0x/wallet.png
Binary files /dev/null and b/assets/images/3.0x/wallet.png differ
assets/images/eye.png
Binary files /dev/null and b/assets/images/eye.png differ
assets/images/key.png
Binary files /dev/null and b/assets/images/key.png differ
assets/images/monero.png
Binary files /dev/null and b/assets/images/monero.png differ
assets/images/nodes.png
Binary files /dev/null and b/assets/images/nodes.png differ
assets/images/open_book.png
Binary files /dev/null and b/assets/images/open_book.png differ
assets/images/reconnect.png
Binary files /dev/null and b/assets/images/reconnect.png differ
assets/images/settings.png
Binary files /dev/null and b/assets/images/settings.png differ
assets/images/wallet.png
Binary files /dev/null and b/assets/images/wallet.png differ
lib/palette.dart
+3
@@ -85,4 +85,7 @@ class PaletteDark {
85 static const Color historyPanel = Color.fromRGBO(33, 43, 73, 1.0);
86 static const Color historyPanelText = Color.fromRGBO(91, 112, 146, 1.0);
87 static const Color historyPanelButton = Color.fromRGBO(39, 53, 96, 1.0);
88 + static const Color menuHeader = Color.fromRGBO(41, 52, 84, 1.0);
89 + static const Color menuList = Color.fromRGBO(48, 59, 95, 1.0);
90 + static const Color menuDivider = Color.fromRGBO(48, 59, 95, 1.0);
91 }
\ No newline at end of file
lib/src/screens/dashboard/dashboard_page.dart
+5 -1
@@ -4,6 +4,7 @@ import 'package:cake_wallet/palette.dart';
4 import 'package:cake_wallet/src/screens/base_page.dart';
5 import 'package:cake_wallet/src/screens/dashboard/widgets/wallet_card.dart';
6 import 'package:cake_wallet/src/screens/dashboard/widgets/trade_history_panel.dart';
7 +import 'package:cake_wallet/src/screens/dashboard/widgets/menu_widget.dart';
8
9 class DashboardPage extends BasePage {
10 final _bodyKey = GlobalKey();
@@ -52,7 +53,10 @@ class DashboardPageBodyState extends State<DashboardPageBody> {
53 highlightColor: Colors.transparent,
54 splashColor: Colors.transparent,
55 padding: EdgeInsets.all(0),
55 - onPressed: () {},
56 + onPressed: () => showDialog<void>(
57 + builder: (_) => MenuWidget(),
58 + context: context
59 + ),
60 child: menuButton),
61 ),
62 ),
lib/src/screens/dashboard/wallet_menu.dart
+17 -8
@@ -10,12 +10,22 @@ class WalletMenu {
10
11 final List<String> items = [
12 S.current.reconnect,
13 - S.current.rescan,
13 S.current.wallets,
14 + S.current.nodes,
15 S.current.show_seed,
16 S.current.show_keys,
17 - S.current.accounts,
18 - S.current.address_book_menu
17 + S.current.address_book_menu,
18 + S.current.settings_title
19 + ];
20 +
21 + final List<Image> images = [
22 + Image.asset('assets/images/reconnect.png'),
23 + Image.asset('assets/images/wallet.png'),
24 + Image.asset('assets/images/nodes.png'),
25 + Image.asset('assets/images/eye.png'),
26 + Image.asset('assets/images/key.png'),
27 + Image.asset('assets/images/open_book.png'),
28 + Image.asset('assets/images/settings.png'),
29 ];
30
31 final BuildContext context;
@@ -26,11 +36,10 @@ class WalletMenu {
36 _presentReconnectAlert(context);
37 break;
38 case 1:
29 - Navigator.of(context).pushNamed(Routes.rescan);
39 + Navigator.of(context).pushNamed(Routes.walletList);
40 break;
41 case 2:
32 - Navigator.of(context).pushNamed(Routes.walletList);
33 -
42 + // FIXME: apply Nodes
43 break;
44 case 3:
45 Navigator.of(context).pushNamed(Routes.auth,
@@ -49,10 +58,10 @@ class WalletMenu {
58 : null);
59 break;
60 case 5:
52 - Navigator.of(context).pushNamed(Routes.accountList);
61 + Navigator.of(context).pushNamed(Routes.addressBook);
62 break;
63 case 6:
55 - Navigator.of(context).pushNamed(Routes.addressBook);
64 + Navigator.of(context).pushNamed(Routes.settings);
65 break;
66 default:
67 break;
lib/src/screens/dashboard/widgets/menu_widget.dart new
+205
@@ -0,0 +1,205 @@
1 +import 'dart:async';
2 +import 'dart:ui';
3 +import 'package:flutter/material.dart';
4 +import 'package:cake_wallet/palette.dart';
5 +import 'package:cake_wallet/src/screens/dashboard/wallet_menu.dart';
6 +import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
7 +import 'package:provider/provider.dart';
8 +
9 +class MenuWidget extends StatefulWidget {
10 + @override
11 + MenuWidgetState createState() => MenuWidgetState();
12 +}
13 +
14 +class MenuWidgetState extends State<MenuWidget> {
15 + final moneroIcon = Image.asset('assets/images/monero.png');
16 + double menuWidth;
17 + double screenWidth;
18 + double opacity;
19 + bool isDraw;
20 +
21 + @override
22 + void initState() {
23 + menuWidth = 0;
24 + screenWidth = 0;
25 + opacity = 0;
26 + isDraw = false;
27 + super.initState();
28 + WidgetsBinding.instance.addPostFrameCallback(afterLayout);
29 + }
30 +
31 + void afterLayout(dynamic _) {
32 + screenWidth = MediaQuery.of(context).size.width;
33 + setState(() {
34 + menuWidth = screenWidth;
35 + opacity = 1;
36 + });
37 + Timer(Duration(milliseconds: 350), () =>
38 + setState(() => isDraw = true)
39 + );
40 + }
41 +
42 + @override
43 + Widget build(BuildContext context) {
44 + final walletMenu = WalletMenu(context);
45 + final walletStore = Provider.of<WalletStore>(context);
46 + final itemCount = walletMenu.items.length;
47 +
48 + return GestureDetector(
49 + onTap: () => Navigator.of(context).pop(),
50 + child: Container(
51 + color: Colors.transparent,
52 + child: BackdropFilter(
53 + filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
54 + child: Container(
55 + decoration: BoxDecoration(color: PaletteDark.historyPanel.withOpacity(0.75)),
56 + child: Padding(
57 + padding: EdgeInsets.only(left: 40),
58 + child: GestureDetector(
59 + onTap: () => null,
60 + child: Container(
61 + width: double.infinity,
62 + height: double.infinity,
63 + alignment: Alignment.centerRight,
64 + child: AnimatedContainer(
65 + alignment: Alignment.centerLeft,
66 + width: menuWidth,
67 + height: double.infinity,
68 + duration: Duration(milliseconds: 500),
69 + curve: Curves.fastOutSlowIn,
70 + decoration: BoxDecoration(
71 + borderRadius: BorderRadius.only(topLeft: Radius.circular(24), bottomLeft: Radius.circular(24)),
72 + color: PaletteDark.menuList.withOpacity(opacity)
73 + ),
74 + child: isDraw
75 + ? ListView.separated(
76 + itemBuilder: (_, index) {
77 +
78 + if (index == 0) {
79 + return Container(
80 + height: 144,
81 + padding: EdgeInsets.only(left: 24, top: 69, right: 24, bottom: 35),
82 + decoration: BoxDecoration(
83 + borderRadius: BorderRadius.only(topLeft: Radius.circular(24)),
84 + color: PaletteDark.menuHeader
85 + ),
86 + child: Row(
87 + mainAxisAlignment: MainAxisAlignment.start,
88 + children: <Widget>[
89 + moneroIcon,
90 + SizedBox(width: 16),
91 + Expanded(
92 + child: Column(
93 + crossAxisAlignment: CrossAxisAlignment.start,
94 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
95 + children: <Widget>[
96 + Text(
97 + walletStore.name,
98 + style: TextStyle(
99 + color: Colors.white,
100 + decoration: TextDecoration.none,
101 + fontFamily: 'Lato',
102 + fontSize: 20,
103 + fontWeight: FontWeight.bold
104 + ),
105 + ),
106 + Text(
107 + walletStore.account.label,
108 + style: TextStyle(
109 + color: PaletteDark.walletCardText,
110 + decoration: TextDecoration.none,
111 + fontFamily: 'Lato',
112 + fontSize: 12
113 + ),
114 + )
115 + ],
116 + )
117 + )
118 + ],
119 + ),
120 + );
121 + }
122 +
123 + index -= 1;
124 + final item = walletMenu.items[index];
125 + final image = walletMenu.images[index] ?? Offstage();
126 +
127 + return GestureDetector(
128 + onTap: () {
129 + Navigator.of(context).pop();
130 + walletMenu.action(index);
131 + },
132 + child: index == itemCount - 1
133 + ? Container(
134 + height: 144,
135 + padding: EdgeInsets.only(left: 24, right: 24, top: 35, bottom: 69),
136 + alignment: Alignment.topLeft,
137 + decoration: BoxDecoration(
138 + borderRadius: BorderRadius.only(bottomLeft: Radius.circular(24)),
139 + color: PaletteDark.menuList,
140 + ),
141 + child: Row(
142 + mainAxisAlignment: MainAxisAlignment.start,
143 + crossAxisAlignment: CrossAxisAlignment.center,
144 + children: <Widget>[
145 + image,
146 + SizedBox(width: 16),
147 + Expanded(
148 + child: Text(
149 + item,
150 + style: TextStyle(
151 + decoration: TextDecoration.none,
152 + color: Colors.white,
153 + fontFamily: 'Lato',
154 + fontSize: 20,
155 + fontWeight: FontWeight.bold
156 + ),
157 + )
158 + )
159 + ],
160 + ),
161 + )
162 + : Container(
163 + height: 91,
164 + padding: EdgeInsets.only(left: 24, right: 24),
165 + color: PaletteDark.menuList,
166 + child: Row(
167 + mainAxisAlignment: MainAxisAlignment.start,
168 + crossAxisAlignment: CrossAxisAlignment.center,
169 + children: <Widget>[
170 + image,
171 + SizedBox(width: 16),
172 + Expanded(
173 + child: Text(
174 + item,
175 + style: TextStyle(
176 + decoration: TextDecoration.none,
177 + color: Colors.white,
178 + fontFamily: 'Lato',
179 + fontSize: 20,
180 + fontWeight: FontWeight.bold
181 + ),
182 + )
183 + )
184 + ],
185 + ),
186 + ),
187 + );
188 + },
189 + separatorBuilder: (_, index) =>
190 + Divider(
191 + height: 1,
192 + color: PaletteDark.walletCardText,
193 + ),
194 + itemCount: itemCount + 1)
195 + : Offstage()
196 + ),
197 + ),
198 + )
199 + ),
200 + ),
201 + ),
202 + ),
203 + );
204 + }
205 +}
\ No newline at end of file