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

lib/palette.dart

@@ -85,4 +85,7 @@ class PaletteDark {
   static const Color historyPanel = Color.fromRGBO(33, 43, 73, 1.0);
   static const Color historyPanelText = Color.fromRGBO(91, 112, 146, 1.0);
   static const Color historyPanelButton = Color.fromRGBO(39, 53, 96, 1.0);
+  static const Color menuHeader = Color.fromRGBO(41, 52, 84, 1.0);
+  static const Color menuList = Color.fromRGBO(48, 59, 95, 1.0);
+  static const Color menuDivider = Color.fromRGBO(48, 59, 95, 1.0);
 }

lib/src/screens/dashboard/dashboard_page.dart

@@ -4,6 +4,7 @@ import 'package:cake_wallet/palette.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/screens/dashboard/widgets/wallet_card.dart';
 import 'package:cake_wallet/src/screens/dashboard/widgets/trade_history_panel.dart';
+import 'package:cake_wallet/src/screens/dashboard/widgets/menu_widget.dart';
 
 class DashboardPage extends BasePage {
   final _bodyKey = GlobalKey();
@@ -52,7 +53,10 @@ class DashboardPageBodyState extends State<DashboardPageBody> {
                         highlightColor: Colors.transparent,
                         splashColor: Colors.transparent,
                         padding: EdgeInsets.all(0),
-                        onPressed: () {},
+                        onPressed: () => showDialog<void>(
+                          builder: (_) => MenuWidget(),
+                          context: context
+                        ),
                         child: menuButton),
                   ),
                 ),

lib/src/screens/dashboard/wallet_menu.dart

@@ -10,12 +10,22 @@ class WalletMenu {
 
   final List<String> items = [
     S.current.reconnect,
-    S.current.rescan,
     S.current.wallets,
+    S.current.nodes,
     S.current.show_seed,
     S.current.show_keys,
-    S.current.accounts,
+    S.current.address_book_menu,
-    S.current.address_book_menu
+    S.current.settings_title
+  ];
+
+  final List<Image> images = [
+    Image.asset('assets/images/reconnect.png'),
+    Image.asset('assets/images/wallet.png'),
+    Image.asset('assets/images/nodes.png'),
+    Image.asset('assets/images/eye.png'),
+    Image.asset('assets/images/key.png'),
+    Image.asset('assets/images/open_book.png'),
+    Image.asset('assets/images/settings.png'),
   ];
 
   final BuildContext context;
@@ -26,11 +36,10 @@ class WalletMenu {
         _presentReconnectAlert(context);
         break;
       case 1:
-        Navigator.of(context).pushNamed(Routes.rescan);
+        Navigator.of(context).pushNamed(Routes.walletList);
         break;
       case 2:
-        Navigator.of(context).pushNamed(Routes.walletList);
+        // FIXME: apply Nodes
-
         break;
       case 3:
         Navigator.of(context).pushNamed(Routes.auth,
@@ -49,10 +58,10 @@ class WalletMenu {
                     : null);
         break;
       case 5:
-        Navigator.of(context).pushNamed(Routes.accountList);
+        Navigator.of(context).pushNamed(Routes.addressBook);
         break;
       case 6:
-        Navigator.of(context).pushNamed(Routes.addressBook);
+        Navigator.of(context).pushNamed(Routes.settings);
         break;
       default:
         break;

lib/src/screens/dashboard/widgets/menu_widget.dart

@@ -0,0 +1,205 @@
+import 'dart:async';
+import 'dart:ui';
+import 'package:flutter/material.dart';
+import 'package:cake_wallet/palette.dart';
+import 'package:cake_wallet/src/screens/dashboard/wallet_menu.dart';
+import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
+import 'package:provider/provider.dart';
+
+class MenuWidget extends StatefulWidget {
+  @override
+  MenuWidgetState createState() => MenuWidgetState();
+}
+
+class MenuWidgetState extends State<MenuWidget> {
+  final moneroIcon = Image.asset('assets/images/monero.png');
+  double menuWidth;
+  double screenWidth;
+  double opacity;
+  bool isDraw;
+
+  @override
+  void initState() {
+    menuWidth = 0;
+    screenWidth = 0;
+    opacity = 0;
+    isDraw = false;
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback(afterLayout);
+  }
+
+  void afterLayout(dynamic _) {
+    screenWidth = MediaQuery.of(context).size.width;
+    setState(() {
+      menuWidth = screenWidth;
+      opacity = 1;
+    });
+    Timer(Duration(milliseconds: 350), () =>
+        setState(() => isDraw = true)
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final walletMenu = WalletMenu(context);
+    final walletStore = Provider.of<WalletStore>(context);
+    final itemCount = walletMenu.items.length;
+
+    return GestureDetector(
+      onTap: () => Navigator.of(context).pop(),
+      child: Container(
+        color: Colors.transparent,
+        child: BackdropFilter(
+          filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
+          child: Container(
+            decoration: BoxDecoration(color: PaletteDark.historyPanel.withOpacity(0.75)),
+            child: Padding(
+              padding: EdgeInsets.only(left: 40),
+              child: GestureDetector(
+                onTap: () => null,
+                child: Container(
+                  width: double.infinity,
+                  height: double.infinity,
+                  alignment: Alignment.centerRight,
+                  child: AnimatedContainer(
+                    alignment: Alignment.centerLeft,
+                    width: menuWidth,
+                    height: double.infinity,
+                    duration: Duration(milliseconds: 500),
+                    curve: Curves.fastOutSlowIn,
+                    decoration: BoxDecoration(
+                      borderRadius: BorderRadius.only(topLeft: Radius.circular(24), bottomLeft: Radius.circular(24)),
+                      color: PaletteDark.menuList.withOpacity(opacity)
+                    ),
+                    child: isDraw
+                      ? ListView.separated(
+                        itemBuilder: (_, index) {
+
+                          if (index == 0) {
+                            return Container(
+                              height: 144,
+                              padding: EdgeInsets.only(left: 24, top: 69, right: 24, bottom: 35),
+                              decoration: BoxDecoration(
+                                borderRadius: BorderRadius.only(topLeft: Radius.circular(24)),
+                                color: PaletteDark.menuHeader
+                              ),
+                              child: Row(
+                                mainAxisAlignment: MainAxisAlignment.start,
+                                children: <Widget>[
+                                  moneroIcon,
+                                  SizedBox(width: 16),
+                                  Expanded(
+                                    child: Column(
+                                      crossAxisAlignment: CrossAxisAlignment.start,
+                                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                                      children: <Widget>[
+                                        Text(
+                                          walletStore.name,
+                                          style: TextStyle(
+                                            color: Colors.white,
+                                            decoration: TextDecoration.none,
+                                            fontFamily: 'Lato',
+                                            fontSize: 20,
+                                            fontWeight: FontWeight.bold
+                                          ),
+                                        ),
+                                        Text(
+                                          walletStore.account.label,
+                                          style: TextStyle(
+                                            color: PaletteDark.walletCardText,
+                                            decoration: TextDecoration.none,
+                                            fontFamily: 'Lato',
+                                            fontSize: 12
+                                          ),
+                                        )
+                                      ],
+                                    )
+                                  )
+                                ],
+                              ),
+                            );
+                          }
+
+                          index -= 1;
+                          final item = walletMenu.items[index];
+                          final image = walletMenu.images[index] ?? Offstage();
+
+                          return GestureDetector(
+                            onTap: () {
+                              Navigator.of(context).pop();
+                              walletMenu.action(index);
+                            },
+                            child: index == itemCount - 1
+                            ? Container(
+                              height: 144,
+                              padding: EdgeInsets.only(left: 24, right: 24, top: 35, bottom: 69),
+                              alignment: Alignment.topLeft,
+                              decoration: BoxDecoration(
+                                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(24)),
+                                color: PaletteDark.menuList,
+                              ),
+                              child: Row(
+                                mainAxisAlignment: MainAxisAlignment.start,
+                                crossAxisAlignment: CrossAxisAlignment.center,
+                                children: <Widget>[
+                                  image,
+                                  SizedBox(width: 16),
+                                  Expanded(
+                                    child: Text(
+                                      item,
+                                      style: TextStyle(
+                                        decoration: TextDecoration.none,
+                                        color: Colors.white,
+                                        fontFamily: 'Lato',
+                                        fontSize: 20,
+                                        fontWeight: FontWeight.bold
+                                      ),
+                                    )
+                                  )
+                                ],
+                              ),
+                            )
+                            : Container(
+                              height: 91,
+                              padding: EdgeInsets.only(left: 24, right: 24),
+                              color: PaletteDark.menuList,
+                              child: Row(
+                                mainAxisAlignment: MainAxisAlignment.start,
+                                crossAxisAlignment: CrossAxisAlignment.center,
+                                children: <Widget>[
+                                  image,
+                                  SizedBox(width: 16),
+                                  Expanded(
+                                    child: Text(
+                                      item,
+                                      style: TextStyle(
+                                        decoration: TextDecoration.none,
+                                        color: Colors.white,
+                                        fontFamily: 'Lato',
+                                        fontSize: 20,
+                                        fontWeight: FontWeight.bold
+                                      ),
+                                    )
+                                  )
+                                ],
+                              ),
+                            ),
+                          );
+                        },
+                        separatorBuilder: (_, index) =>
+                          Divider(
+                            height: 1,
+                            color: PaletteDark.walletCardText,
+                          ),
+                        itemCount: itemCount + 1)
+                    : Offstage()
+                  ),
+                ),
+              )
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}