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)
OleksandrSobol committed
Sep 23, 2020 at 22:31 UTC
757d48f793126b59103ea9d5505df072019fd300
5 files changed
+230
-306
lib/src/screens/wallet_list/wallet_list_page.dart
+69
-82
@@ -1,8 +1,8 @@
1
+import 'package:cake_wallet/src/screens/wallet_list/widgets/wallet_menu_alert.dart';
2
import 'package:flutter/material.dart';
3
import 'package:flutter/cupertino.dart';
4
import 'package:flutter_mobx/flutter_mobx.dart';
5
import 'package:cake_wallet/routes.dart';
5
-import 'package:cake_wallet/palette.dart';
6
import 'package:cake_wallet/generated/i18n.dart';
7
import 'package:cake_wallet/entities/wallet_type.dart';
8
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';
10
import 'package:cake_wallet/src/screens/base_page.dart';
11
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
12
import 'package:cake_wallet/src/screens/wallet_list/wallet_menu.dart';
13
-import 'package:cake_wallet/src/screens/wallet_list/widgets/wallet_tile.dart';
13
14
class WalletListPage extends BasePage {
15
WalletListPage({this.walletListViewModel});
@@ -65,95 +64,83 @@ class WalletListBodyState extends State<WalletListBody> {
64
itemCount: widget.walletListViewModel.wallets.length,
65
itemBuilder: (__, index) {
66
final wallet = widget.walletListViewModel.wallets[index];
68
- final screenWidth = MediaQuery.of(context).size.width;
67
final walletMenu = WalletMenu(context, widget.walletListViewModel);
68
final items =
69
walletMenu.generateItemsForWalletMenu(wallet.isCurrent);
72
- final colors = walletMenu
73
- .generateColorsForWalletMenu(wallet.isCurrent);
74
- final images = walletMenu
75
- .generateImagesForWalletMenu(wallet.isCurrent);
70
+ final currentColor = wallet.isCurrent
71
+ ? Theme.of(context).accentTextTheme.subtitle.decorationColor
72
+ : Theme.of(context).backgroundColor;
73
77
- return Container(
78
- height: tileHeight,
79
- width: double.infinity,
80
- child: CustomScrollView(
81
- scrollDirection: Axis.horizontal,
82
- controller: scrollController,
83
- slivers: <Widget>[
84
- SliverPersistentHeader(
85
- pinned: false,
86
- floating: true,
87
- delegate: WalletTile(
88
- min: screenWidth - 170,
89
- max: screenWidth,
90
- image: _imageFor(type: wallet.type),
91
- walletName: wallet.name,
92
- walletAddress: '', //shortAddress,
93
- isCurrent: wallet.isCurrent),
94
- ),
95
- SliverList(
96
- delegate:
97
- SliverChildBuilderDelegate((context, index) {
98
- final item = items[index];
99
- final image = images[index];
100
- final firstColor = colors[index*2];
101
- final secondColor = colors[index*2 + 1];
102
-
103
- final radius = index == 0 ? 10.0 : 0.0;
104
-
105
- return GestureDetector(
106
- onTap: () {
107
- scrollController.animateTo(0.0,
108
- duration: Duration(milliseconds: 500),
109
- curve: Curves.fastOutSlowIn);
110
- walletMenu.action(
111
- walletMenu.listItems.indexOf(item),
112
- wallet,
113
- wallet.isCurrent);
114
- },
115
- child: Container(
116
- height: tileHeight,
117
- width: 80,
118
- color: Theme.of(context).backgroundColor,
74
+ return GestureDetector(
75
+ onTap: () {
76
+ showDialog<void>(
77
+ context: context,
78
+ builder: (dialogContext) {
79
+ return WalletMenuAlert(
80
+ wallet: wallet,
81
+ walletMenu: walletMenu,
82
+ items: items);
83
+ }
84
+ );
85
+ },
86
+ child: Container(
87
+ height: tileHeight,
88
+ width: double.infinity,
89
+ child: Row(
90
+ children: <Widget>[
91
+ Container(
92
+ height: tileHeight,
93
+ width: 4,
94
+ decoration: BoxDecoration(
95
+ borderRadius: BorderRadius.only(
96
+ topRight: Radius.circular(4),
97
+ bottomRight: Radius.circular(4)),
98
+ color: currentColor
99
+ ),
100
+ ),
101
+ Expanded(
102
child: Container(
120
- padding: EdgeInsets.only(left: 5, right: 5),
121
- decoration: BoxDecoration(
122
- borderRadius: BorderRadius.only(
123
- topLeft: Radius.circular(radius),
124
- bottomLeft: Radius.circular(radius)),
125
- gradient: LinearGradient(
126
- begin: Alignment.topCenter,
127
- end: Alignment.bottomCenter,
128
- colors: [
129
- firstColor,
130
- secondColor
131
- ]
103
+ height: tileHeight,
104
+ padding: EdgeInsets.only(left: 20, right: 20),
105
+ color: Theme.of(context).backgroundColor,
106
+ alignment: Alignment.centerLeft,
107
+ child: Row(
108
+ crossAxisAlignment: CrossAxisAlignment.center,
109
+ children: <Widget>[
110
+ _imageFor(type: wallet.type),
111
+ SizedBox(width: 10),
112
+ Text(
113
+ wallet.name,
114
+ style: TextStyle(
115
+ fontSize: 22,
116
+ fontWeight: FontWeight.w600,
117
+ color: Theme.of(context).primaryTextTheme.title.color
118
+ ),
119
)
133
- ),
134
- child: Center(
135
- child: Column(
136
- mainAxisSize: MainAxisSize.min,
137
- children: <Widget>[
138
- image,
139
- SizedBox(height: 2),
140
- Text(
141
- item,
142
- textAlign: TextAlign.center,
143
- style: TextStyle(
144
- fontSize: 7,
145
- fontWeight: FontWeight.w500,
146
- color: Colors.white),
147
- )
148
- ],
149
- ),
120
+ ],
121
),
122
),
123
+ ),
124
+ Container(
125
+ height: tileHeight,
126
+ width: 10,
127
+ decoration: BoxDecoration(
128
+ borderRadius: BorderRadius.only(
129
+ topLeft: Radius.circular(10),
130
+ bottomLeft: Radius.circular(10)),
131
+ gradient: LinearGradient(
132
+ begin: Alignment.topCenter,
133
+ end: Alignment.bottomCenter,
134
+ colors: [
135
+ Theme.of(context).accentTextTheme.headline.color,
136
+ Theme.of(context).accentTextTheme.headline.backgroundColor
137
+ ]
138
+ )
139
),
153
- );
154
- }, childCount: items.length))
155
- ],
156
- ),
140
+ ),
141
+ ],
142
+ ),
143
+ )
144
);
145
}),
146
),
lib/src/screens/wallet_list/wallet_menu.dart
+33
-73
@@ -1,10 +1,9 @@
1
+import 'package:cake_wallet/src/screens/wallet_list/wallet_menu_item.dart';
2
import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
3
import 'package:cake_wallet/view_model/wallet_list/wallet_list_view_model.dart';
4
import 'package:flutter/material.dart';
5
import 'package:cake_wallet/routes.dart';
5
-import 'package:provider/provider.dart';
6
import 'package:cake_wallet/generated/i18n.dart';
7
-// import 'package:cake_wallet/src/stores/wallet_list/wallet_list_store.dart';
7
import 'package:cake_wallet/view_model/wallet_list/wallet_list_item.dart';
8
import 'package:cake_wallet/src/screens/auth/auth_page.dart';
9
import 'package:cake_wallet/palette.dart';
@@ -15,85 +14,46 @@ class WalletMenu {
14
final WalletListViewModel walletListViewModel;
15
final BuildContext context;
16
18
- final List<String> listItems = [
19
- S.current.wallet_list_load_wallet,
20
- S.current.show_seed,
21
- S.current.remove,
22
- S.current.rescan
17
+ final List<WalletMenuItem> menuItems = [
18
+ WalletMenuItem(
19
+ title: S.current.wallet_list_load_wallet,
20
+ firstGradientColor: Palette.cornflower,
21
+ secondGradientColor: Palette.royalBlue,
22
+ image: Image.asset('assets/images/load.png',
23
+ height: 24, width: 24, color: Colors.white)),
24
+ WalletMenuItem(
25
+ title: S.current.show_seed,
26
+ firstGradientColor: Palette.moderateOrangeYellow,
27
+ secondGradientColor: Palette.moderateOrange,
28
+ image: Image.asset('assets/images/eye_action.png',
29
+ height: 24, width: 24, color: Colors.white)),
30
+ WalletMenuItem(
31
+ title: S.current.remove,
32
+ firstGradientColor: Palette.lightRed,
33
+ secondGradientColor: Palette.persianRed,
34
+ image: Image.asset('assets/images/trash.png',
35
+ height: 24, width: 24, color: Colors.white)),
36
+ WalletMenuItem(
37
+ title: S.current.rescan,
38
+ firstGradientColor: Palette.shineGreen,
39
+ secondGradientColor: Palette.moderateGreen,
40
+ image: Image.asset('assets/images/scanner.png',
41
+ height: 24, width: 24, color: Colors.white))
42
];
43
25
- final List<Color> firstColors = [
26
- Palette.cornflower,
27
- Palette.moderateOrangeYellow,
28
- Palette.lightRed,
29
- Palette.shineGreen
30
- ];
31
-
32
- final List<Color> secondColors = [
33
- Palette.royalBlue,
34
- Palette.moderateOrange,
35
- Palette.persianRed,
36
- Palette.moderateGreen
37
- ];
38
-
39
- final List<Image> listImages = [
40
- Image.asset('assets/images/load.png',
41
- height: 24, width: 24, color: Colors.white),
42
- Image.asset('assets/images/eye_action.png',
43
- height: 24, width: 24, color: Colors.white),
44
- Image.asset('assets/images/trash.png',
45
- height: 24, width: 24, color: Colors.white),
46
- Image.asset('assets/images/scanner.png',
47
- height: 24, width: 24, color: Colors.white)
48
- ];
44
+ List<WalletMenuItem> generateItemsForWalletMenu(bool isCurrentWallet) {
45
+ final items = List<WalletMenuItem>();
46
50
- List<String> generateItemsForWalletMenu(bool isCurrentWallet) {
51
- final items = List<String>();
52
-
53
- if (!isCurrentWallet) items.add(listItems[0]);
54
- if (isCurrentWallet) items.add(listItems[1]);
55
- if (!isCurrentWallet) items.add(listItems[2]);
56
- if (isCurrentWallet) items.add(listItems[3]);
47
+ if (!isCurrentWallet) items.add(menuItems[0]);
48
+ if (isCurrentWallet) items.add(menuItems[1]);
49
+ if (!isCurrentWallet) items.add(menuItems[2]);
50
+ if (isCurrentWallet) items.add(menuItems[3]);
51
52
return items;
53
}
54
61
- List<Color> generateColorsForWalletMenu(bool isCurrentWallet) {
62
- final colors = <Color>[];
63
-
64
- if (!isCurrentWallet) {
65
- colors.add(firstColors[0]);
66
- colors.add(secondColors[0]);
67
- }
68
- if (isCurrentWallet) {
69
- colors.add(firstColors[1]);
70
- colors.add(secondColors[1]);
71
- }
72
- if (!isCurrentWallet) {
73
- colors.add(firstColors[2]);
74
- colors.add(secondColors[2]);
75
- }
76
- if (isCurrentWallet) {
77
- colors.add(firstColors[3]);
78
- colors.add(secondColors[3]);
79
- }
80
-
81
- return colors;
82
- }
83
-
84
- List<Image> generateImagesForWalletMenu(bool isCurrentWallet) {
85
- final images = <Image>[];
86
-
87
- if (!isCurrentWallet) images.add(listImages[0]);
88
- if (isCurrentWallet) images.add(listImages[1]);
89
- if (!isCurrentWallet) images.add(listImages[2]);
90
- if (isCurrentWallet) images.add(listImages[3]);
91
-
92
- return images;
93
- }
94
-
55
Future<void> action(
96
- int index, WalletListItem wallet, bool isCurrentWallet) async {
56
+ int index, WalletListItem wallet) async {
57
switch (index) {
58
case 0:
59
await Navigator.of(context).pushNamed(Routes.auth, arguments:
lib/src/screens/wallet_list/wallet_menu_item.dart
new
+16
@@ -0,0 +1,16 @@
1
+import 'dart:ui';
2
+import 'package:flutter/cupertino.dart';
3
+
4
+class WalletMenuItem {
5
+ WalletMenuItem({
6
+ @required this.title,
7
+ @required this.firstGradientColor,
8
+ @required this.secondGradientColor,
9
+ @required this.image
10
+ });
11
+
12
+ final String title;
13
+ final Color firstGradientColor;
14
+ final Color secondGradientColor;
15
+ final Image image;
16
+}
\ No newline at end of file
lib/src/screens/wallet_list/widgets/wallet_menu_alert.dart
new
+112
@@ -0,0 +1,112 @@
1
+import 'dart:ui';
2
+import 'package:cake_wallet/palette.dart';
3
+import 'package:cake_wallet/src/screens/wallet_list/wallet_menu.dart';
4
+import 'package:cake_wallet/src/screens/wallet_list/wallet_menu_item.dart';
5
+import 'package:cake_wallet/view_model/wallet_list/wallet_list_item.dart';
6
+import 'package:flutter/cupertino.dart';
7
+import 'package:flutter/material.dart';
8
+import 'package:cake_wallet/src/widgets/alert_background.dart';
9
+import 'package:cake_wallet/src/widgets/alert_close_button.dart';
10
+
11
+class WalletMenuAlert extends StatelessWidget {
12
+ WalletMenuAlert({
13
+ @required this.wallet,
14
+ @required this.walletMenu,
15
+ @required this.items
16
+ });
17
+
18
+ final WalletListItem wallet;
19
+ final WalletMenu walletMenu;
20
+ final List<WalletMenuItem> items;
21
+ final closeButton = Image.asset('assets/images/close.png',
22
+ color: Palette.darkBlueCraiola,
23
+ );
24
+
25
+ @override
26
+ Widget build(BuildContext context) {
27
+ return AlertBackground(
28
+ child: Stack(
29
+ alignment: Alignment.center,
30
+ children: <Widget>[
31
+ Padding(
32
+ padding: EdgeInsets.only(
33
+ left: 24,
34
+ right: 24,
35
+ ),
36
+ child: ClipRRect(
37
+ borderRadius: BorderRadius.all(Radius.circular(14)),
38
+ child: Container(
39
+ color: Theme.of(context).textTheme.body2.decorationColor,
40
+ padding: EdgeInsets.only(left: 24),
41
+ child: ListView.separated(
42
+ shrinkWrap: true,
43
+ physics: const NeverScrollableScrollPhysics(),
44
+ itemCount: items.length,
45
+ separatorBuilder: (context, _) => Container(
46
+ height: 1,
47
+ color: Theme.of(context).accentTextTheme.subhead.backgroundColor,
48
+ ),
49
+ itemBuilder: (_, index) {
50
+ final item = items[index];
51
+
52
+ return GestureDetector(
53
+ onTap: () {
54
+ Navigator.of(context).pop();
55
+ walletMenu.action(
56
+ walletMenu.menuItems.indexOf(item),
57
+ wallet);
58
+ },
59
+ child: Container(
60
+ padding: EdgeInsets.only(top: 12, bottom: 12),
61
+ child: Row(
62
+ mainAxisSize: MainAxisSize.min,
63
+ mainAxisAlignment: MainAxisAlignment.start,
64
+ crossAxisAlignment: CrossAxisAlignment.center,
65
+ children: <Widget>[
66
+ Container(
67
+ height: 56,
68
+ width: 56,
69
+ decoration: BoxDecoration(
70
+ borderRadius: BorderRadius.all(
71
+ Radius.circular(12)),
72
+ gradient: LinearGradient(
73
+ begin: Alignment.topCenter,
74
+ end: Alignment.bottomCenter,
75
+ colors: [
76
+ item.firstGradientColor,
77
+ item.secondGradientColor
78
+ ]
79
+ )
80
+ ),
81
+ child: Center(
82
+ child: item.image,
83
+ ),
84
+ ),
85
+ SizedBox(width: 12),
86
+ Expanded(
87
+ child: Text(
88
+ item.title,
89
+ style: TextStyle(
90
+ color: Theme.of(context).primaryTextTheme.title.color,
91
+ fontSize: 18,
92
+ fontFamily: 'Poppins',
93
+ fontWeight: FontWeight.w500,
94
+ decoration: TextDecoration.none
95
+ ),
96
+ )
97
+ )
98
+ ],
99
+ ),
100
+ ),
101
+ );
102
+ },
103
+ ),
104
+ ),
105
+ ),
106
+ ),
107
+ AlertCloseButton(image: closeButton)
108
+ ],
109
+ ),
110
+ );
111
+ }
112
+}
\ No newline at end of file
lib/src/screens/wallet_list/widgets/wallet_tile.dart
deleted
-151
@@ -1,151 +0,0 @@
1
-import 'package:flutter/material.dart';
2
-import 'package:flutter/cupertino.dart';
3
-
4
-class WalletTile extends SliverPersistentHeaderDelegate {
5
- WalletTile({
6
- @required this.min,
7
- @required this.max,
8
- @required this.image,
9
- @required this.walletName,
10
- @required this.walletAddress,
11
- @required this.isCurrent
12
- });
13
-
14
- final double min;
15
- final double max;
16
- final Image image;
17
- final String walletName;
18
- final String walletAddress;
19
- final bool isCurrent;
20
- final double tileHeight = 60;
21
-
22
- @override
23
- Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
24
- var opacity = 1 - shrinkOffset / (max - min);
25
- opacity = opacity >= 0 ? opacity : 0;
26
-
27
- var panelWidth = 10 * opacity;
28
- panelWidth = panelWidth < 10 ? 0 : 10;
29
-
30
- final currentColor = isCurrent
31
- ? Theme.of(context).accentTextTheme.subtitle.decorationColor
32
- : Theme.of(context).backgroundColor;
33
-
34
- return Stack(
35
- fit: StackFit.expand,
36
- overflow: Overflow.visible,
37
- children: <Widget>[
38
- Positioned(
39
- top: 0,
40
- right: max - 4,
41
- child: Container(
42
- height: tileHeight,
43
- width: 4,
44
- decoration: BoxDecoration(
45
- borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)),
46
- color: currentColor
47
- ),
48
- ),
49
- ),
50
- Positioned(
51
- top: 0,
52
- right: 10,
53
- child: Container(
54
- height: tileHeight,
55
- width: max - 14,
56
- padding: EdgeInsets.only(left: 20, right: 20),
57
- color: Theme.of(context).backgroundColor,
58
- alignment: Alignment.centerLeft,
59
- child: Row(
60
- //mainAxisAlignment: MainAxisAlignment.start,
61
- crossAxisAlignment: CrossAxisAlignment.center,
62
- children: <Widget>[
63
- image,
64
- SizedBox(width: 10),
65
- Text(
66
- walletName,
67
- style: TextStyle(
68
- fontSize: 22,
69
- fontWeight: FontWeight.w600,
70
- color: Theme.of(context).primaryTextTheme.title.color
71
- ),
72
- )
73
- ],
74
- ),
75
- /*Column(
76
- mainAxisSize: MainAxisSize.max,
77
- mainAxisAlignment: MainAxisAlignment.center,
78
- children: <Widget>[
79
- Row(
80
- mainAxisAlignment: MainAxisAlignment.start,
81
- crossAxisAlignment: CrossAxisAlignment.center,
82
- children: <Widget>[
83
- image,
84
- SizedBox(width: 10),
85
- Text(
86
- walletName,
87
- style: TextStyle(
88
- fontSize: 22,
89
- fontWeight: FontWeight.bold,
90
- color: Theme.of(context).primaryTextTheme.title.color
91
- ),
92
- )
93
- ],
94
- ),
95
- isCurrent ? SizedBox(height: 5) : Offstage(),
96
- isCurrent
97
- ? Row(
98
- mainAxisAlignment: MainAxisAlignment.start,
99
- crossAxisAlignment: CrossAxisAlignment.center,
100
- children: <Widget>[
101
- SizedBox(width: 34),
102
- Text(
103
- walletAddress,
104
- style: TextStyle(
105
- fontSize: 12,
106
- color: Theme.of(context).primaryTextTheme.caption.color
107
- ),
108
- )
109
- ],
110
- )
111
- : Offstage()
112
- ],
113
- ),*/
114
- ),
115
- ),
116
- Positioned(
117
- top: 0,
118
- right: 0,
119
- child: Opacity(
120
- opacity: opacity,
121
- child: Container(
122
- height: tileHeight,
123
- width: panelWidth,
124
- decoration: BoxDecoration(
125
- borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
126
- gradient: LinearGradient(
127
- begin: Alignment.topCenter,
128
- end: Alignment.bottomCenter,
129
- colors: [
130
- Theme.of(context).accentTextTheme.headline.color,
131
- Theme.of(context).accentTextTheme.headline.backgroundColor
132
- ]
133
- )
134
- ),
135
- ),
136
- )
137
- ),
138
- ],
139
- );
140
- }
141
-
142
- @override
143
- double get maxExtent => max;
144
-
145
- @override
146
- double get minExtent => min;
147
-
148
- @override
149
- bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
150
-
151
-}
\ No newline at end of file