CAKE-45 | created wallet menu item and wallet menu alert; deleted wallet tile; added menuItems to wallet menu; reworked wallet list page (removed slider menu on wallet list screen and used alert instead of this)

lib/src/screens/wallet_list/wallet_list_page.dart

@@ -1,8 +1,8 @@
+import 'package:cake_wallet/src/screens/wallet_list/widgets/wallet_menu_alert.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:cake_wallet/routes.dart';
-import 'package:cake_wallet/palette.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/entities/wallet_type.dart';
 import 'package:cake_wallet/view_model/wallet_list/wallet_list_view_model.dart';
@@ -10,7 +10,6 @@ import 'package:cake_wallet/src/widgets/primary_button.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
 import 'package:cake_wallet/src/screens/wallet_list/wallet_menu.dart';
-import 'package:cake_wallet/src/screens/wallet_list/widgets/wallet_tile.dart';
 
 class WalletListPage extends BasePage {
   WalletListPage({this.walletListViewModel});
@@ -65,95 +64,83 @@ class WalletListBodyState extends State<WalletListBody> {
                   itemCount: widget.walletListViewModel.wallets.length,
                   itemBuilder: (__, index) {
                     final wallet = widget.walletListViewModel.wallets[index];
-                    final screenWidth = MediaQuery.of(context).size.width;
                     final walletMenu = WalletMenu(context, widget.walletListViewModel);
                     final items =
                         walletMenu.generateItemsForWalletMenu(wallet.isCurrent);
-                    final colors = walletMenu
+                    final currentColor = wallet.isCurrent
-                        .generateColorsForWalletMenu(wallet.isCurrent);
+                        ? Theme.of(context).accentTextTheme.subtitle.decorationColor
-                    final images = walletMenu
+                        : Theme.of(context).backgroundColor;
-                        .generateImagesForWalletMenu(wallet.isCurrent);
 
-                    return Container(
+                    return GestureDetector(
-                      height: tileHeight,
+                      onTap: () {
-                      width: double.infinity,
+                        showDialog<void>(
-                      child: CustomScrollView(
+                            context: context,
-                        scrollDirection: Axis.horizontal,
+                            builder: (dialogContext) {
-                        controller: scrollController,
+                              return WalletMenuAlert(
-                        slivers: <Widget>[
+                                  wallet: wallet,
-                          SliverPersistentHeader(
+                                  walletMenu: walletMenu,
-                            pinned: false,
+                                  items: items);
-                            floating: true,
+                            }
-                            delegate: WalletTile(
+                        );
-                                min: screenWidth - 170,
+                      },
-                                max: screenWidth,
+                      child: Container(
-                                image: _imageFor(type: wallet.type),
+                        height: tileHeight,
-                                walletName: wallet.name,
+                        width: double.infinity,
-                                walletAddress: '', //shortAddress,
+                        child: Row(
-                                isCurrent: wallet.isCurrent),
+                          children: <Widget>[
-                          ),
+                            Container(
-                          SliverList(
+                              height: tileHeight,
-                              delegate:
+                              width: 4,
-                                  SliverChildBuilderDelegate((context, index) {
+                              decoration: BoxDecoration(
-                            final item = items[index];
+                                  borderRadius: BorderRadius.only(
-                            final image = images[index];
+                                      topRight: Radius.circular(4),
-                            final firstColor = colors[index*2];
+                                      bottomRight: Radius.circular(4)),
-                            final secondColor = colors[index*2 + 1];
+                                  color: currentColor
-
+                              ),
-                            final radius = index == 0 ? 10.0 : 0.0;
+                            ),
-
+                            Expanded(
-                            return GestureDetector(
-                              onTap: () {
-                                scrollController.animateTo(0.0,
-                                    duration: Duration(milliseconds: 500),
-                                    curve: Curves.fastOutSlowIn);
-                                walletMenu.action(
-                                    walletMenu.listItems.indexOf(item),
-                                    wallet,
-                                    wallet.isCurrent);
-                              },
-                              child: Container(
-                                height: tileHeight,
-                                width: 80,
-                                color: Theme.of(context).backgroundColor,
                                 child: Container(
-                                  padding: EdgeInsets.only(left: 5, right: 5),
+                                  height: tileHeight,
-                                  decoration: BoxDecoration(
+                                  padding: EdgeInsets.only(left: 20, right: 20),
-                                      borderRadius: BorderRadius.only(
+                                  color: Theme.of(context).backgroundColor,
-                                          topLeft: Radius.circular(radius),
+                                  alignment: Alignment.centerLeft,
-                                          bottomLeft: Radius.circular(radius)),
+                                  child: Row(
-                                      gradient: LinearGradient(
+                                    crossAxisAlignment: CrossAxisAlignment.center,
-                                          begin: Alignment.topCenter,
+                                    children: <Widget>[
-                                          end: Alignment.bottomCenter,
+                                      _imageFor(type: wallet.type),
-                                          colors: [
+                                      SizedBox(width: 10),
-                                            firstColor,
+                                      Text(
-                                            secondColor
+                                        wallet.name,
-                                          ]
+                                        style: TextStyle(
+                                            fontSize: 22,
+                                            fontWeight: FontWeight.w600,
+                                            color: Theme.of(context).primaryTextTheme.title.color
+                                        ),
                                       )
-                                  ),
+                                    ],
-                                  child: Center(
-                                    child: Column(
-                                      mainAxisSize: MainAxisSize.min,
-                                      children: <Widget>[
-                                        image,
-                                        SizedBox(height: 2),
-                                        Text(
-                                          item,
-                                          textAlign: TextAlign.center,
-                                          style: TextStyle(
-                                              fontSize: 7,
-                                              fontWeight: FontWeight.w500,
-                                              color: Colors.white),
-                                        )
-                                      ],
-                                    ),
                                   ),
                                 ),
+                            ),
+                            Container(
+                              height: tileHeight,
+                              width: 10,
+                              decoration: BoxDecoration(
+                                  borderRadius: BorderRadius.only(
+                                      topLeft: Radius.circular(10),
+                                      bottomLeft: Radius.circular(10)),
+                                  gradient: LinearGradient(
+                                      begin: Alignment.topCenter,
+                                      end: Alignment.bottomCenter,
+                                      colors: [
+                                        Theme.of(context).accentTextTheme.headline.color,
+                                        Theme.of(context).accentTextTheme.headline.backgroundColor
+                                      ]
+                                  )
                               ),
-                            );
+                            ),
-                          }, childCount: items.length))
+                          ],
-                        ],
+                        ),
-                      ),
+                      )
                     );
                   }),
             ),

lib/src/screens/wallet_list/wallet_menu.dart

@@ -1,10 +1,9 @@
+import 'package:cake_wallet/src/screens/wallet_list/wallet_menu_item.dart';
 import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
 import 'package:cake_wallet/view_model/wallet_list/wallet_list_view_model.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/routes.dart';
-import 'package:provider/provider.dart';
 import 'package:cake_wallet/generated/i18n.dart';
-// import 'package:cake_wallet/src/stores/wallet_list/wallet_list_store.dart';
 import 'package:cake_wallet/view_model/wallet_list/wallet_list_item.dart';
 import 'package:cake_wallet/src/screens/auth/auth_page.dart';
 import 'package:cake_wallet/palette.dart';
@@ -15,85 +14,46 @@ class WalletMenu {
   final WalletListViewModel walletListViewModel;
   final BuildContext context;
 
-  final List<String> listItems = [
+  final List<WalletMenuItem> menuItems = [
-    S.current.wallet_list_load_wallet,
+    WalletMenuItem(
-    S.current.show_seed,
+        title: S.current.wallet_list_load_wallet,
-    S.current.remove,
+        firstGradientColor: Palette.cornflower,
-    S.current.rescan
+        secondGradientColor: Palette.royalBlue,
+        image: Image.asset('assets/images/load.png',
+            height: 24, width: 24, color: Colors.white)),
+    WalletMenuItem(
+        title: S.current.show_seed,
+        firstGradientColor: Palette.moderateOrangeYellow,
+        secondGradientColor: Palette.moderateOrange,
+        image: Image.asset('assets/images/eye_action.png',
+            height: 24, width: 24, color: Colors.white)),
+    WalletMenuItem(
+        title: S.current.remove,
+        firstGradientColor: Palette.lightRed,
+        secondGradientColor: Palette.persianRed,
+        image: Image.asset('assets/images/trash.png',
+            height: 24, width: 24, color: Colors.white)),
+    WalletMenuItem(
+        title: S.current.rescan,
+        firstGradientColor: Palette.shineGreen,
+        secondGradientColor: Palette.moderateGreen,
+        image: Image.asset('assets/images/scanner.png',
+            height: 24, width: 24, color: Colors.white))
   ];
 
-  final List<Color> firstColors = [
+  List<WalletMenuItem> generateItemsForWalletMenu(bool isCurrentWallet) {
-    Palette.cornflower,
+    final items = List<WalletMenuItem>();
-    Palette.moderateOrangeYellow,
-    Palette.lightRed,
-    Palette.shineGreen
-  ];
 
-  final List<Color> secondColors = [
+    if (!isCurrentWallet) items.add(menuItems[0]);
-    Palette.royalBlue,
+    if (isCurrentWallet) items.add(menuItems[1]);
-    Palette.moderateOrange,
+    if (!isCurrentWallet) items.add(menuItems[2]);
-    Palette.persianRed,
+    if (isCurrentWallet) items.add(menuItems[3]);
-    Palette.moderateGreen
-  ];
-
-  final List<Image> listImages = [
-    Image.asset('assets/images/load.png',
-        height: 24, width: 24, color: Colors.white),
-    Image.asset('assets/images/eye_action.png',
-        height: 24, width: 24, color: Colors.white),
-    Image.asset('assets/images/trash.png',
-        height: 24, width: 24, color: Colors.white),
-    Image.asset('assets/images/scanner.png',
-        height: 24, width: 24, color: Colors.white)
-  ];
-
-  List<String> generateItemsForWalletMenu(bool isCurrentWallet) {
-    final items = List<String>();
-
-    if (!isCurrentWallet) items.add(listItems[0]);
-    if (isCurrentWallet) items.add(listItems[1]);
-    if (!isCurrentWallet) items.add(listItems[2]);
-    if (isCurrentWallet) items.add(listItems[3]);
 
     return items;
   }
 
-  List<Color> generateColorsForWalletMenu(bool isCurrentWallet) {
-    final colors = <Color>[];
-
-    if (!isCurrentWallet) {
-      colors.add(firstColors[0]);
-      colors.add(secondColors[0]);
-    }
-    if (isCurrentWallet) {
-      colors.add(firstColors[1]);
-      colors.add(secondColors[1]);
-    }
-    if (!isCurrentWallet) {
-      colors.add(firstColors[2]);
-      colors.add(secondColors[2]);
-    }
-    if (isCurrentWallet) {
-      colors.add(firstColors[3]);
-      colors.add(secondColors[3]);
-    }
-
-    return colors;
-  }
-
-  List<Image> generateImagesForWalletMenu(bool isCurrentWallet) {
-    final images = <Image>[];
-
-    if (!isCurrentWallet) images.add(listImages[0]);
-    if (isCurrentWallet) images.add(listImages[1]);
-    if (!isCurrentWallet) images.add(listImages[2]);
-    if (isCurrentWallet) images.add(listImages[3]);
-
-    return images;
-  }
-
   Future<void> action(
-      int index, WalletListItem wallet, bool isCurrentWallet) async {
+      int index, WalletListItem wallet) async {
     switch (index) {
       case 0:
         await Navigator.of(context).pushNamed(Routes.auth, arguments:

lib/src/screens/wallet_list/wallet_menu_item.dart

@@ -0,0 +1,16 @@
+import 'dart:ui';
+import 'package:flutter/cupertino.dart';
+
+class WalletMenuItem {
+  WalletMenuItem({
+    @required this.title,
+    @required this.firstGradientColor,
+    @required this.secondGradientColor,
+    @required this.image
+  });
+
+  final String title;
+  final Color firstGradientColor;
+  final Color secondGradientColor;
+  final Image image;
+}

lib/src/screens/wallet_list/widgets/wallet_menu_alert.dart

@@ -0,0 +1,112 @@
+import 'dart:ui';
+import 'package:cake_wallet/palette.dart';
+import 'package:cake_wallet/src/screens/wallet_list/wallet_menu.dart';
+import 'package:cake_wallet/src/screens/wallet_list/wallet_menu_item.dart';
+import 'package:cake_wallet/view_model/wallet_list/wallet_list_item.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:cake_wallet/src/widgets/alert_background.dart';
+import 'package:cake_wallet/src/widgets/alert_close_button.dart';
+
+class WalletMenuAlert extends StatelessWidget {
+  WalletMenuAlert({
+    @required this.wallet,
+    @required this.walletMenu,
+    @required this.items
+  });
+
+  final WalletListItem wallet;
+  final WalletMenu walletMenu;
+  final List<WalletMenuItem> items;
+  final closeButton = Image.asset('assets/images/close.png',
+    color: Palette.darkBlueCraiola,
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertBackground(
+      child: Stack(
+        alignment: Alignment.center,
+        children: <Widget>[
+          Padding(
+            padding: EdgeInsets.only(
+                left: 24,
+                right: 24,
+            ),
+            child: ClipRRect(
+              borderRadius: BorderRadius.all(Radius.circular(14)),
+              child: Container(
+                color: Theme.of(context).textTheme.body2.decorationColor,
+                padding: EdgeInsets.only(left: 24),
+                child: ListView.separated(
+                  shrinkWrap: true,
+                  physics: const NeverScrollableScrollPhysics(),
+                  itemCount: items.length,
+                  separatorBuilder: (context, _) => Container(
+                    height: 1,
+                    color: Theme.of(context).accentTextTheme.subhead.backgroundColor,
+                  ),
+                  itemBuilder: (_, index) {
+                    final item = items[index];
+
+                    return GestureDetector(
+                      onTap: () {
+                        Navigator.of(context).pop();
+                        walletMenu.action(
+                            walletMenu.menuItems.indexOf(item),
+                            wallet);
+                      },
+                      child: Container(
+                        padding: EdgeInsets.only(top: 12, bottom: 12),
+                        child: Row(
+                          mainAxisSize: MainAxisSize.min,
+                          mainAxisAlignment: MainAxisAlignment.start,
+                          crossAxisAlignment: CrossAxisAlignment.center,
+                          children: <Widget>[
+                            Container(
+                              height: 56,
+                              width: 56,
+                              decoration: BoxDecoration(
+                                  borderRadius: BorderRadius.all(
+                                      Radius.circular(12)),
+                                  gradient: LinearGradient(
+                                      begin: Alignment.topCenter,
+                                      end: Alignment.bottomCenter,
+                                      colors: [
+                                        item.firstGradientColor,
+                                        item.secondGradientColor
+                                      ]
+                                  )
+                              ),
+                              child: Center(
+                                child: item.image,
+                              ),
+                            ),
+                            SizedBox(width: 12),
+                            Expanded(
+                              child: Text(
+                                item.title,
+                                style: TextStyle(
+                                    color: Theme.of(context).primaryTextTheme.title.color,
+                                    fontSize: 18,
+                                    fontFamily: 'Poppins',
+                                    fontWeight: FontWeight.w500,
+                                    decoration: TextDecoration.none
+                                ),
+                              )
+                            )
+                          ],
+                        ),
+                      ),
+                    );
+                  },
+                ),
+              ),
+            ),
+          ),
+          AlertCloseButton(image: closeButton)
+        ],
+      ),
+    );
+  }
+}

lib/src/screens/wallet_list/widgets/wallet_tile.dart

@@ -1,151 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter/cupertino.dart';
-
-class WalletTile extends SliverPersistentHeaderDelegate {
-  WalletTile({
-    @required this.min,
-    @required this.max,
-    @required this.image,
-    @required this.walletName,
-    @required this.walletAddress,
-    @required this.isCurrent
-  });
-
-  final double min;
-  final double max;
-  final Image image;
-  final String walletName;
-  final String walletAddress;
-  final bool isCurrent;
-  final double tileHeight = 60;
-
-  @override
-  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
-    var opacity = 1 - shrinkOffset / (max - min);
-    opacity = opacity >= 0 ? opacity : 0;
-
-    var panelWidth = 10 * opacity;
-    panelWidth = panelWidth < 10 ? 0 : 10;
-
-    final currentColor = isCurrent
-        ? Theme.of(context).accentTextTheme.subtitle.decorationColor
-        : Theme.of(context).backgroundColor;
-
-    return Stack(
-      fit: StackFit.expand,
-      overflow: Overflow.visible,
-      children: <Widget>[
-        Positioned(
-          top: 0,
-          right: max - 4,
-          child: Container(
-            height: tileHeight,
-            width: 4,
-            decoration: BoxDecoration(
-                borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)),
-                color: currentColor
-            ),
-          ),
-        ),
-        Positioned(
-          top: 0,
-          right: 10,
-          child: Container(
-            height: tileHeight,
-            width: max - 14,
-            padding: EdgeInsets.only(left: 20, right: 20),
-            color: Theme.of(context).backgroundColor,
-            alignment: Alignment.centerLeft,
-            child: Row(
-              //mainAxisAlignment: MainAxisAlignment.start,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: <Widget>[
-                image,
-                SizedBox(width: 10),
-                Text(
-                  walletName,
-                  style: TextStyle(
-                      fontSize: 22,
-                      fontWeight: FontWeight.w600,
-                      color: Theme.of(context).primaryTextTheme.title.color
-                  ),
-                )
-              ],
-            ),
-            /*Column(
-              mainAxisSize: MainAxisSize.max,
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: <Widget>[
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.start,
-                  crossAxisAlignment: CrossAxisAlignment.center,
-                  children: <Widget>[
-                    image,
-                    SizedBox(width: 10),
-                    Text(
-                      walletName,
-                      style: TextStyle(
-                          fontSize: 22,
-                          fontWeight: FontWeight.bold,
-                          color: Theme.of(context).primaryTextTheme.title.color
-                      ),
-                    )
-                  ],
-                ),
-                isCurrent ? SizedBox(height: 5) : Offstage(),
-                isCurrent
-                ? Row(
-                  mainAxisAlignment: MainAxisAlignment.start,
-                  crossAxisAlignment: CrossAxisAlignment.center,
-                  children: <Widget>[
-                    SizedBox(width: 34),
-                    Text(
-                      walletAddress,
-                      style: TextStyle(
-                        fontSize: 12,
-                        color: Theme.of(context).primaryTextTheme.caption.color
-                      ),
-                    )
-                  ],
-                )
-                : Offstage()
-              ],
-            ),*/
-          ),
-        ),
-        Positioned(
-            top: 0,
-            right: 0,
-            child: Opacity(
-              opacity: opacity,
-              child: Container(
-                height: tileHeight,
-                width: panelWidth,
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
-                  gradient: LinearGradient(
-                        begin: Alignment.topCenter,
-                        end: Alignment.bottomCenter,
-                        colors: [
-                          Theme.of(context).accentTextTheme.headline.color,
-                          Theme.of(context).accentTextTheme.headline.backgroundColor
-                        ]
-                  )
-                ),
-              ),
-            )
-        ),
-      ],
-    );
-  }
-
-  @override
-  double get maxExtent => max;
-
-  @override
-  double get minExtent => min;
-
-  @override
-  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
-
-}