CAKE-28 | reworked exchange confirm page; applied light and dark themes to exchange confirm page, currency picker, picker, base alert dialog, alert with one action; applied maximum characters parameter to crypto currency text field in the exchange card
Oleksandr Sobol committed
Aug 25, 2020 at 21:12 UTC
ecf7a5ba7856c2005903a5f0df44c3cfdc5c50c9
15 files changed
+404
-341
assets/images/2.0x/question_mark.png
Binary files /dev/null and b/assets/images/2.0x/question_mark.png differ
assets/images/3.0x/question_mark.png
Binary files /dev/null and b/assets/images/3.0x/question_mark.png differ
assets/images/question_mark.png
Binary files /dev/null and b/assets/images/question_mark.png differ
lib/palette.dart
+2
@@ -31,6 +31,7 @@ class Palette {
31
static const Color darkGray = Color.fromRGBO(122, 147, 186, 1.0);
32
static const Color shadowWhite = Color.fromRGBO(242, 245, 255, 1.0);
33
static const Color niagara = Color.fromRGBO(152, 172, 201, 1.0);
34
+ static const Color alizarinRed = Color.fromRGBO(233, 45, 45, 1.0);
35
36
// FIXME: Rename.
37
static const Color eee = Color.fromRGBO(236, 239, 245, 1.0);
@@ -79,6 +80,7 @@ class PaletteDark {
80
static const Color violetBlue = Color.fromRGBO(59, 72, 119, 1.0);
81
static const Color distantBlue = Color.fromRGBO(72, 85, 131, 1.0);
82
static const Color moderateVioletBlue = Color.fromRGBO(62, 73, 113, 1.0);
83
+ static const Color deepVioletBlue = Color.fromRGBO(52, 66, 104, 1.0);
84
85
// FIXME: Rename.
86
static const Color eee = Color.fromRGBO(236, 239, 245, 1.0);
lib/src/screens/exchange/widgets/currency_picker.dart
+85
-84
@@ -1,8 +1,10 @@
1
import 'dart:ui';
2
+import 'package:cake_wallet/palette.dart';
3
import 'package:flutter/cupertino.dart';
4
import 'package:flutter/material.dart';
4
-import 'package:cake_wallet/palette.dart';
5
import 'package:cake_wallet/src/domain/common/crypto_currency.dart';
6
+import 'package:cake_wallet/src/widgets/alert_background.dart';
7
+import 'package:cake_wallet/src/widgets/alert_close_button.dart';
8
9
class CurrencyPicker extends StatelessWidget {
10
CurrencyPicker({
@@ -16,104 +18,103 @@ class CurrencyPicker extends StatelessWidget {
18
final List<CryptoCurrency> items;
19
final String title;
20
final Function(CryptoCurrency) onItemSelected;
21
+ final closeButton = Image.asset('assets/images/close.png',
22
+ color: Palette.darkBlueCraiola,
23
+ );
24
25
@override
26
Widget build(BuildContext context) {
22
- return GestureDetector(
23
- onTap: () => Navigator.of(context).pop(),
24
- child: Container(
25
- color: Colors.transparent,
26
- child: BackdropFilter(
27
- filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
28
- child: Container(
29
- decoration: BoxDecoration(color: PaletteDark.darkNightBlue.withOpacity(0.75)),
30
- child: Center(
31
- child: Column(
32
- mainAxisSize: MainAxisSize.min,
33
- children: <Widget>[
34
- Container(
35
- padding: EdgeInsets.only(left: 24, right: 24),
36
- child: Text(
37
- title,
38
- textAlign: TextAlign.center,
39
- style: TextStyle(
40
- fontSize: 18,
41
- fontWeight: FontWeight.bold,
42
- decoration: TextDecoration.none,
43
- color: Colors.white
44
- ),
27
+ return AlertBackground(
28
+ child: Stack(
29
+ alignment: Alignment.center,
30
+ children: <Widget>[
31
+ Column(
32
+ mainAxisSize: MainAxisSize.min,
33
+ children: <Widget>[
34
+ Container(
35
+ padding: EdgeInsets.only(left: 24, right: 24),
36
+ child: Text(
37
+ title,
38
+ textAlign: TextAlign.center,
39
+ style: TextStyle(
40
+ fontSize: 18,
41
+ fontFamily: 'Poppins',
42
+ fontWeight: FontWeight.bold,
43
+ decoration: TextDecoration.none,
44
+ color: Colors.white
45
),
46
),
47
- Padding(
48
- padding: EdgeInsets.only(top: 24),
49
- child: GestureDetector(
50
- onTap: () => null,
51
- child: ClipRRect(
52
- borderRadius: BorderRadius.all(Radius.circular(14)),
53
- child: Container(
54
- height: 400,
55
- width: 300,
56
- color: Theme.of(context).dividerColor,
57
- child: GridView.count(
58
- shrinkWrap: true,
59
- crossAxisCount: 3,
60
- childAspectRatio: 1.25,
61
- physics: const NeverScrollableScrollPhysics(),
62
- crossAxisSpacing: 1,
63
- mainAxisSpacing: 1,
64
- children: List.generate(15, (index) {
47
+ ),
48
+ Padding(
49
+ padding: EdgeInsets.only(top: 24),
50
+ child: GestureDetector(
51
+ onTap: () => null,
52
+ child: ClipRRect(
53
+ borderRadius: BorderRadius.all(Radius.circular(14)),
54
+ child: Container(
55
+ height: 400,
56
+ width: 300,
57
+ color: Theme.of(context).accentTextTheme.title.backgroundColor,
58
+ child: GridView.count(
59
+ shrinkWrap: true,
60
+ crossAxisCount: 3,
61
+ childAspectRatio: 1.25,
62
+ physics: const NeverScrollableScrollPhysics(),
63
+ crossAxisSpacing: 1,
64
+ mainAxisSpacing: 1,
65
+ children: List.generate(15, (index) {
66
66
- if (index == 14) {
67
- return Container(
68
- color: Theme.of(context).primaryTextTheme.display1.color,
69
- );
70
- }
67
+ if (index == 14) {
68
+ return Container(
69
+ color: Theme.of(context).accentTextTheme.title.color,
70
+ );
71
+ }
72
72
- final item = items[index];
73
- final isItemSelected = index == selectedAtIndex;
73
+ final item = items[index];
74
+ final isItemSelected = index == selectedAtIndex;
75
75
- final color = isItemSelected
76
- ? Theme.of(context).accentTextTheme.subtitle.decorationColor
77
- : Theme.of(context).primaryTextTheme.display1.color;
78
- final textColor = isItemSelected
79
- ? Colors.blue
80
- : Theme.of(context).primaryTextTheme.title.color;
76
+ final color = isItemSelected
77
+ ? Theme.of(context).textTheme.body2.color
78
+ : Theme.of(context).accentTextTheme.title.color;
79
+ final textColor = isItemSelected
80
+ ? Palette.blueCraiola
81
+ : Theme.of(context).primaryTextTheme.title.color;
82
82
- return GestureDetector(
83
- onTap: () {
84
- if (onItemSelected == null) {
85
- return;
86
- }
87
- Navigator.of(context).pop();
88
- onItemSelected(item);
89
- },
90
- child: Container(
91
- color: color,
92
- child: Center(
93
- child: Text(
94
- item.toString(),
95
- style: TextStyle(
96
- fontSize: 18,
97
- fontWeight: FontWeight.bold,
98
- decoration: TextDecoration.none,
99
- color: textColor
100
- ),
83
+ return GestureDetector(
84
+ onTap: () {
85
+ if (onItemSelected == null) {
86
+ return;
87
+ }
88
+ Navigator.of(context).pop();
89
+ onItemSelected(item);
90
+ },
91
+ child: Container(
92
+ color: color,
93
+ child: Center(
94
+ child: Text(
95
+ item.toString(),
96
+ style: TextStyle(
97
+ fontSize: 18,
98
+ fontFamily: 'Poppins',
99
+ fontWeight: FontWeight.w600,
100
+ decoration: TextDecoration.none,
101
+ color: textColor
102
),
103
),
104
),
104
- );
105
- })
106
- ),
105
+ ),
106
+ );
107
+ })
108
),
109
),
110
),
110
- )
111
- ],
112
- ),
113
- )
114
- ),
115
- ),
116
- ),
111
+ ),
112
+ )
113
+ ],
114
+ ),
115
+ AlertCloseButton(image: closeButton)
116
+ ],
117
+ )
118
);
119
}
120
}
\ No newline at end of file
lib/src/screens/exchange/widgets/exchange_card.dart
+1
@@ -146,6 +146,7 @@ class ExchangeCardState extends State<ExchangeCard> {
146
keyboardType: TextInputType.numberWithOptions(
147
signed: false, decimal: true),
148
inputFormatters: [
149
+ LengthLimitingTextInputFormatter(15),
150
BlacklistingTextInputFormatter(
151
RegExp('[\\-|\\ |\\,]'))
152
],
lib/src/screens/exchange_trade/exchange_confirm_page.dart
+96
-66
@@ -6,6 +6,7 @@ import 'package:cake_wallet/generated/i18n.dart';
6
import 'package:cake_wallet/src/widgets/primary_button.dart';
7
import 'package:cake_wallet/src/screens/base_page.dart';
8
import 'package:cake_wallet/src/domain/exchange/trade.dart';
9
+import 'package:cake_wallet/palette.dart';
10
11
class ExchangeConfirmPage extends BasePage {
12
ExchangeConfirmPage({@required this.trade});
@@ -16,94 +17,123 @@ class ExchangeConfirmPage extends BasePage {
17
String get title => S.current.copy_id;
18
19
@override
19
- Widget body(BuildContext context) {
20
- final copyImage = Image.asset('assets/images/copy_content.png',
20
+ Widget trailing(BuildContext context) {
21
+ final questionImage = Image.asset('assets/images/question_mark.png',
22
color: Theme.of(context).primaryTextTheme.title.color);
23
24
+ return SizedBox(
25
+ height: 20.0,
26
+ width: 20.0,
27
+ child: ButtonTheme(
28
+ minWidth: double.minPositive,
29
+ child: FlatButton(
30
+ highlightColor: Colors.transparent,
31
+ splashColor: Colors.transparent,
32
+ padding: EdgeInsets.all(0),
33
+ onPressed: () {},
34
+ child: questionImage),
35
+ ),
36
+ );
37
+ }
38
+
39
+ @override
40
+ Widget body(BuildContext context) {
41
return Container(
24
- padding: EdgeInsets.all(24),
42
+ padding: EdgeInsets.fromLTRB(24, 0, 24, 24),
43
child: Column(
44
children: <Widget>[
45
Expanded(
28
- child: Center(
29
- child: Column(
30
- mainAxisSize: MainAxisSize.min,
31
- children: <Widget>[
32
- Text(
33
- S.of(context).exchange_result_write_down_trade_id,
34
- textAlign: TextAlign.center,
35
- style: TextStyle(
36
- fontSize: 18.0,
37
- fontWeight: FontWeight.w600,
38
- color: Theme.of(context).primaryTextTheme.title.color),
39
- ),
40
- Padding(
41
- padding: EdgeInsets.only(top: 60),
46
+ child: Column(
47
+ children: <Widget>[
48
+ Flexible(
49
+ child: Center(
50
child: Text(
43
- S.of(context).trade_id,
51
+ S.of(context).exchange_result_write_down_trade_id,
52
textAlign: TextAlign.center,
53
style: TextStyle(
46
- fontSize: 16.0,
47
- fontWeight: FontWeight.w600,
48
- color: Theme.of(context).primaryTextTheme.title.color),
54
+ fontSize: 18.0,
55
+ fontWeight: FontWeight.w500,
56
+ color: Theme.of(context).primaryTextTheme.title.color),
57
),
58
+ )
59
+ ),
60
+ Container(
61
+ height: 178,
62
+ decoration: BoxDecoration(
63
+ borderRadius: BorderRadius.all(Radius.circular(30)),
64
+ border: Border.all(
65
+ width: 1,
66
+ color: Theme.of(context).accentTextTheme.caption.color
67
+ ),
68
+ color: Theme.of(context).accentTextTheme.title.color
69
),
51
- Padding(
52
- padding: EdgeInsets.only(top: 24),
53
- child: Builder(
54
- builder: (context) => GestureDetector(
55
- onTap: () {
56
- Clipboard.setData(ClipboardData(text: trade.id));
57
- Scaffold.of(context).showSnackBar(SnackBar(
58
- content: Text(
59
- S.of(context).copied_to_clipboard,
60
- textAlign: TextAlign.center,
61
- style: TextStyle(color: Colors.white),
62
- ),
63
- backgroundColor: Colors.green,
64
- duration: Duration(milliseconds: 1500),
65
- ));
66
- },
67
- child: Container(
68
- height: 60,
69
- padding: EdgeInsets.only(left: 24, right: 24),
70
- decoration: BoxDecoration(
71
- borderRadius: BorderRadius.all(Radius.circular(30)),
72
- color: Theme.of(context).accentTextTheme.title.backgroundColor
73
- ),
74
- child: Row(
75
- mainAxisSize: MainAxisSize.max,
70
+ child: Column(
71
+ children: <Widget>[
72
+ Expanded(
73
+ child: Padding(
74
+ padding: EdgeInsets.all(24),
75
+ child: Column(
76
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
77
+ crossAxisAlignment: CrossAxisAlignment.center,
78
children: <Widget>[
77
- Expanded(
78
- child: Text(
79
- trade.id,
80
- maxLines: 1,
81
- overflow: TextOverflow.ellipsis,
82
- style: TextStyle(
83
- fontSize: 18,
84
- fontWeight: FontWeight.w600,
85
- color: Theme.of(context).primaryTextTheme.title.color
86
- ),
79
+ Text(
80
+ S.of(context).trade_id,
81
+ style: TextStyle(
82
+ fontSize: 12.0,
83
+ fontWeight: FontWeight.w500,
84
+ color: Theme.of(context).primaryTextTheme.overline.color
85
+ ),
86
+ ),
87
+ Text(
88
+ trade.id,
89
+ maxLines: 1,
90
+ overflow: TextOverflow.ellipsis,
91
+ style: TextStyle(
92
+ fontSize: 20,
93
+ fontWeight: FontWeight.w600,
94
+ color: Theme.of(context).primaryTextTheme.title.color
95
),
96
),
89
- Padding(
90
- padding: EdgeInsets.only(left: 12),
91
- child: copyImage,
92
- )
97
],
98
),
99
+ )
100
+ ),
101
+ Padding(
102
+ padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
103
+ child: Builder(
104
+ builder: (context) => PrimaryButton(
105
+ onPressed: () {
106
+ Clipboard.setData(ClipboardData(text: trade.id));
107
+ Scaffold.of(context).showSnackBar(SnackBar(
108
+ content: Text(
109
+ S.of(context).copied_to_clipboard,
110
+ textAlign: TextAlign.center,
111
+ style: TextStyle(color: Colors.white),
112
+ ),
113
+ backgroundColor: Colors.green,
114
+ duration: Duration(milliseconds: 1500),
115
+ ));
116
+ },
117
+ text: S.of(context).copy_id,
118
+ color: Theme.of(context).accentTextTheme.caption.backgroundColor,
119
+ textColor: Theme.of(context).primaryTextTheme.title.color
120
+ ),
121
),
122
)
97
- ),
98
- )
99
- ],
100
- ),
101
- )),
123
+ ],
124
+ ),
125
+ ),
126
+ Flexible(
127
+ child: Offstage()
128
+ ),
129
+ ],
130
+ )
131
+ ),
132
PrimaryButton(
133
onPressed: () => Navigator.of(context)
134
.pushReplacementNamed(Routes.exchangeTrade, arguments: trade),
135
text: S.of(context).saved_the_trade_id,
106
- color: Colors.green,
136
+ color: Palette.blueCraiola,
137
textColor: Colors.white)
138
],
139
),
lib/src/screens/monero_accounts/monero_account_list_page.dart
+3
-1
@@ -27,7 +27,9 @@ class MoneroAccountListPage extends StatelessWidget {
27
}
28
29
final MoneroAccountListViewModel accountListViewModel;
30
- final closeIcon = Image.asset('assets/images/close.png');
30
+ final closeIcon = Image.asset('assets/images/close.png',
31
+ color: Palette.darkBlueCraiola,
32
+ );
33
34
ScrollController controller;
35
double backgroundHeight;
lib/src/widgets/alert_with_one_action.dart
+3
-8
@@ -1,5 +1,6 @@
1
import 'package:flutter/material.dart';
2
import 'package:cake_wallet/src/widgets/base_alert_dialog.dart';
3
+import 'package:cake_wallet/palette.dart';
4
5
class AlertWithOneAction extends BaseAlertDialog {
6
AlertWithOneAction({
@@ -31,13 +32,7 @@ class AlertWithOneAction extends BaseAlertDialog {
32
width: 300,
33
height: 52,
34
padding: EdgeInsets.only(left: 12, right: 12),
34
- decoration: BoxDecoration(
35
- borderRadius: BorderRadius.only(
36
- bottomLeft: Radius.circular(24),
37
- bottomRight: Radius.circular(24)
38
- ),
39
- color: Colors.white
40
- ),
35
+ color: Palette.blueCraiola,
36
child: ButtonTheme(
37
minWidth: double.infinity,
38
child: FlatButton(
@@ -50,7 +45,7 @@ class AlertWithOneAction extends BaseAlertDialog {
45
style: TextStyle(
46
fontSize: 15,
47
fontWeight: FontWeight.w600,
53
- color: Colors.blue,
48
+ color: Colors.white,
49
decoration: TextDecoration.none,
50
),
51
)),
lib/src/widgets/base_alert_dialog.dart
+52
-81
@@ -17,6 +17,7 @@ class BaseAlertDialog extends StatelessWidget {
17
textAlign: TextAlign.center,
18
style: TextStyle(
19
fontSize: 20,
20
+ fontFamily: 'Poppins',
21
fontWeight: FontWeight.w600,
22
color: Theme.of(context).primaryTextTheme.title.color,
23
decoration: TextDecoration.none,
@@ -30,7 +31,7 @@ class BaseAlertDialog extends StatelessWidget {
31
textAlign: TextAlign.center,
32
style: TextStyle(
33
fontSize: 16,
33
- fontWeight: FontWeight.w600,
34
+ fontFamily: 'Poppins',
35
color: Theme.of(context).primaryTextTheme.title.color,
36
decoration: TextDecoration.none,
37
),
@@ -38,55 +39,39 @@ class BaseAlertDialog extends StatelessWidget {
39
}
40
41
Widget actionButtons(BuildContext context) {
41
- return Container(
42
- width: 300,
43
- height: 52,
44
- decoration: BoxDecoration(
45
- borderRadius: BorderRadius.only(
46
- bottomLeft: Radius.circular(24),
47
- bottomRight: Radius.circular(24)
48
- ),
49
- color: Colors.white
50
- ),
51
- child: Row(
52
- mainAxisSize: MainAxisSize.max,
53
- children: <Widget>[
54
- Flexible(
42
+ return Row(
43
+ mainAxisSize: MainAxisSize.max,
44
+ children: <Widget>[
45
+ Flexible(
46
child: Container(
47
+ height: 52,
48
padding: EdgeInsets.only(left: 12, right: 12),
57
- decoration: BoxDecoration(
58
- borderRadius: BorderRadius.only(bottomLeft: Radius.circular(24)),
59
- ),
49
+ color: Palette.blueCraiola,
50
child: ButtonTheme(
51
minWidth: double.infinity,
52
child: FlatButton(
63
- onPressed: actionLeft,
64
- highlightColor: Colors.transparent,
65
- splashColor: Colors.transparent,
66
- child: Text(
67
- leftActionButtonText,
68
- textAlign: TextAlign.center,
69
- style: TextStyle(
70
- fontSize: 15,
71
- fontWeight: FontWeight.w600,
72
- color: Colors.blue,
73
- decoration: TextDecoration.none,
74
- ),
75
- )),
53
+ onPressed: actionLeft,
54
+ highlightColor: Colors.transparent,
55
+ splashColor: Colors.transparent,
56
+ child: Text(
57
+ leftActionButtonText,
58
+ textAlign: TextAlign.center,
59
+ style: TextStyle(
60
+ fontSize: 15,
61
+ fontFamily: 'Poppins',
62
+ fontWeight: FontWeight.w600,
63
+ color: Colors.white,
64
+ decoration: TextDecoration.none,
65
+ ),
66
+ )),
67
),
68
)
78
- ),
79
- Container(
80
- height: 52,
81
- width: 1,
82
- color: Colors.grey.withOpacity(0.2),
83
- ),
84
- Flexible(
69
+ ),
70
+ Flexible(
71
child: Container(
72
+ height: 52,
73
padding: EdgeInsets.only(left: 12, right: 12),
87
- decoration: BoxDecoration(
88
- borderRadius: BorderRadius.only(bottomRight: Radius.circular(24)),
89
- ),
74
+ color: Palette.alizarinRed,
75
child: ButtonTheme(
76
minWidth: double.infinity,
77
child: FlatButton(
@@ -98,16 +83,16 @@ class BaseAlertDialog extends StatelessWidget {
83
textAlign: TextAlign.center,
84
style: TextStyle(
85
fontSize: 15,
86
+ fontFamily: 'Poppins',
87
fontWeight: FontWeight.w600,
102
- color: Colors.red,
88
+ color: Colors.white,
89
decoration: TextDecoration.none,
90
),
91
)),
92
),
93
)
108
- )
109
- ],
110
- ),
94
+ )
95
+ ],
96
);
97
}
98
@@ -126,44 +111,30 @@ class BaseAlertDialog extends StatelessWidget {
111
child: Center(
112
child: GestureDetector(
113
onTap: () => null,
129
- child: Container(
130
- width: 300,
131
- height: 257,
132
- decoration: BoxDecoration(
133
- borderRadius: BorderRadius.all(Radius.circular(24)),
134
- color: Theme.of(context).accentTextTheme.title.backgroundColor
135
- ),
136
- child: Column(
137
- children: <Widget>[
138
- Container(
139
- width: 300,
140
- height: 77,
141
- padding: EdgeInsets.only(left: 24, right: 24),
142
- decoration: BoxDecoration(
143
- borderRadius: BorderRadius.only(
144
- topLeft: Radius.circular(24),
145
- topRight: Radius.circular(24)
114
+ child: ClipRRect(
115
+ borderRadius: BorderRadius.all(Radius.circular(30)),
116
+ child: Container(
117
+ width: 300,
118
+ color: Theme.of(context).accentTextTheme.title.decorationColor,
119
+ child: Column(
120
+ mainAxisSize: MainAxisSize.min,
121
+ children: <Widget>[
122
+ Container(
123
+ padding: EdgeInsets.fromLTRB(24, 32, 24, 32),
124
+ child: Column(
125
+ crossAxisAlignment: CrossAxisAlignment.center,
126
+ children: <Widget>[
127
+ title(context),
128
+ Padding(
129
+ padding: EdgeInsets.only(top: 8),
130
+ child: content(context),
131
+ )
132
+ ],
133
),
134
),
148
- child: Center(
149
- child: title(context),
150
- ),
151
- ),
152
- Container(
153
- width: 300,
154
- height: 1,
155
- color: Theme.of(context).dividerColor,
156
- ),
157
- Container(
158
- width: 300,
159
- height: 127,
160
- padding: EdgeInsets.all(24),
161
- child: Center(
162
- child: content(context),
163
- ),
164
- ),
165
- actionButtons(context)
166
- ],
135
+ actionButtons(context)
136
+ ],
137
+ ),
138
),
139
),
140
),
lib/src/widgets/base_text_form_field.dart
+4
-1
@@ -21,7 +21,8 @@ class BaseTextFormField extends StatelessWidget {
21
this.enabled = true,
22
this.validator,
23
this.textStyle,
24
- this.placeholderTextStyle});
24
+ this.placeholderTextStyle,
25
+ this.maxLength});
26
27
final TextEditingController controller;
28
final TextInputType keyboardType;
@@ -42,6 +43,7 @@ class BaseTextFormField extends StatelessWidget {
43
final FormFieldValidator<String> validator;
44
final TextStyle placeholderTextStyle;
45
final TextStyle textStyle;
46
+ final int maxLength;
47
48
@override
49
Widget build(BuildContext context) {
@@ -54,6 +56,7 @@ class BaseTextFormField extends StatelessWidget {
56
maxLines: maxLines,
57
inputFormatters: inputFormatters,
58
enabled: enabled,
59
+ maxLength: maxLength,
60
style: textStyle ?? TextStyle(
61
fontSize: 16.0,
62
color: textColor ?? Theme.of(context).primaryTextTheme.title.color),
lib/src/widgets/picker.dart
+98
-56
@@ -1,15 +1,20 @@
1
import 'dart:ui';
2
+import 'package:flutter/cupertino.dart';
3
import 'package:flutter/material.dart';
4
+import 'package:cake_wallet/src/widgets/alert_background.dart';
5
+import 'package:cake_wallet/src/widgets/cake_scrollbar.dart';
6
+import 'package:cake_wallet/src/widgets/alert_close_button.dart';
7
import 'package:cake_wallet/palette.dart';
8
5
-class Picker<Item extends Object> extends StatelessWidget {
9
+class Picker<Item extends Object> extends StatefulWidget {
10
Picker({
11
@required this.selectedAtIndex,
12
@required this.items,
13
this.images,
14
@required this.title,
15
@required this.onItemSelected,
12
- this.mainAxisAlignment = MainAxisAlignment.start
16
+ this.mainAxisAlignment = MainAxisAlignment.start,
17
+ this.isAlwaysShowScrollThumb = false
18
});
19
20
final int selectedAtIndex;
@@ -18,59 +23,87 @@ class Picker<Item extends Object> extends StatelessWidget {
23
final String title;
24
final Function(Item) onItemSelected;
25
final MainAxisAlignment mainAxisAlignment;
26
+ final bool isAlwaysShowScrollThumb;
27
+
28
+ @override
29
+ PickerState createState() => PickerState<Item>(items, images, onItemSelected);
30
+}
31
+
32
+class PickerState<Item> extends State<Picker> {
33
+ PickerState(this.items, this.images, this.onItemSelected);
34
+
35
+ final Function(Item) onItemSelected;
36
+ final List<Item> items;
37
+ final List<Image> images;
38
+
39
+ final closeButton = Image.asset('assets/images/close.png',
40
+ color: Palette.darkBlueCraiola,
41
+ );
42
+ ScrollController controller = ScrollController();
43
+
44
+ final double backgroundHeight = 193;
45
+ final double thumbHeight = 72;
46
+ double fromTop = 0;
47
48
@override
49
Widget build(BuildContext context) {
24
- return GestureDetector(
25
- onTap: () => Navigator.of(context).pop(),
26
- child: Container(
27
- color: Colors.transparent,
28
- child: BackdropFilter(
29
- filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
30
- child: Container(
31
- decoration: BoxDecoration(color: PaletteDark.darkNightBlue.withOpacity(0.75)),
32
- child: Center(
33
- child: Column(
34
- mainAxisSize: MainAxisSize.min,
35
- children: <Widget>[
36
- Container(
37
- padding: EdgeInsets.only(left: 24, right: 24),
38
- child: Text(
39
- title,
40
- textAlign: TextAlign.center,
41
- style: TextStyle(
42
- fontSize: 18,
43
- fontWeight: FontWeight.bold,
44
- decoration: TextDecoration.none,
45
- color: Colors.white
46
- ),
47
- ),
50
+ controller.addListener(() {
51
+ fromTop = controller.hasClients
52
+ ? (controller.offset / controller.position.maxScrollExtent * (backgroundHeight - thumbHeight))
53
+ : 0;
54
+ setState(() {});
55
+ });
56
+
57
+ return AlertBackground(
58
+ child: Stack(
59
+ alignment: Alignment.center,
60
+ children: <Widget>[
61
+ Column(
62
+ mainAxisSize: MainAxisSize.min,
63
+ children: <Widget>[
64
+ Container(
65
+ padding: EdgeInsets.only(left: 24, right: 24),
66
+ child: Text(
67
+ widget.title,
68
+ textAlign: TextAlign.center,
69
+ style: TextStyle(
70
+ fontSize: 18,
71
+ fontFamily: 'Poppins',
72
+ fontWeight: FontWeight.bold,
73
+ decoration: TextDecoration.none,
74
+ color: Colors.white
75
),
49
- Padding(
50
- padding: EdgeInsets.only(left: 24, right: 24, top: 24),
51
- child: GestureDetector(
52
- onTap: () => null,
53
- child: ClipRRect(
54
- borderRadius: BorderRadius.all(Radius.circular(14)),
55
- child: Container(
56
- height: 233,
57
- color: Theme.of(context).accentTextTheme.title.backgroundColor,
58
- child: ListView.separated(
76
+ ),
77
+ ),
78
+ Padding(
79
+ padding: EdgeInsets.only(left: 24, right: 24, top: 24),
80
+ child: GestureDetector(
81
+ onTap: () => null,
82
+ child: ClipRRect(
83
+ borderRadius: BorderRadius.all(Radius.circular(14)),
84
+ child: Container(
85
+ height: 233,
86
+ color: Theme.of(context).accentTextTheme.title.color,
87
+ child: Stack(
88
+ alignment: Alignment.center,
89
+ children: <Widget>[
90
+ ListView.separated(
91
+ controller: controller,
92
separatorBuilder: (context, index) => Divider(
60
- color: Theme.of(context).dividerColor,
93
+ color: Theme.of(context).accentTextTheme.title.backgroundColor,
94
height: 1,
95
),
96
itemCount: items == null ? 0 : items.length,
97
itemBuilder: (context, index) {
98
final item = items[index];
99
final image = images != null? images[index] : null;
67
- final isItemSelected = index == selectedAtIndex;
100
+ final isItemSelected = index == widget.selectedAtIndex;
101
102
final color = isItemSelected
70
- ? Theme.of(context).accentTextTheme.subtitle.decorationColor
71
- : Colors.transparent;
103
+ ? Theme.of(context).textTheme.body2.color
104
+ : Theme.of(context).accentTextTheme.title.color;
105
final textColor = isItemSelected
73
- ? Colors.blue
106
+ ? Palette.blueCraiola
107
: Theme.of(context).primaryTextTheme.title.color;
108
109
return GestureDetector(
@@ -87,21 +120,22 @@ class Picker<Item extends Object> extends StatelessWidget {
120
color: color,
121
child: Row(
122
mainAxisSize: MainAxisSize.max,
90
- mainAxisAlignment: mainAxisAlignment,
123
+ mainAxisAlignment: widget.mainAxisAlignment,
124
crossAxisAlignment: CrossAxisAlignment.center,
125
children: <Widget>[
126
image != null
94
- ? image
95
- : Offstage(),
127
+ ? image
128
+ : Offstage(),
129
Padding(
130
padding: EdgeInsets.only(
98
- left: image != null ? 12 : 0
131
+ left: image != null ? 12 : 0
132
),
133
child: Text(
134
item.toString(),
135
style: TextStyle(
136
fontSize: 18,
104
- fontWeight: FontWeight.bold,
137
+ fontFamily: 'Poppins',
138
+ fontWeight: FontWeight.w600,
139
color: textColor,
140
decoration: TextDecoration.none,
141
),
@@ -112,17 +146,25 @@ class Picker<Item extends Object> extends StatelessWidget {
146
),
147
);
148
},
149
+ ),
150
+ widget.isAlwaysShowScrollThumb
151
+ ? CakeScrollbar(
152
+ backgroundHeight: backgroundHeight,
153
+ thumbHeight: thumbHeight,
154
+ fromTop: fromTop
155
)
116
- ),
117
- ),
156
+ : Offstage(),
157
+ ],
158
+ )
159
),
119
- )
120
- ],
121
- ),
122
- )
123
- ),
124
- ),
125
- ),
160
+ ),
161
+ ),
162
+ )
163
+ ],
164
+ ),
165
+ AlertCloseButton(image: closeButton)
166
+ ],
167
+ )
168
);
169
}
128
-}
170
+}
\ No newline at end of file
lib/themes.dart
+57
-42
@@ -118,6 +118,34 @@ class Themes {
118
)
119
),
120
focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page)
121
+ accentTextTheme: TextTheme(
122
+ title: TextStyle(
123
+ color: Colors.white, // picker background
124
+ backgroundColor: Palette.periwinkleCraiola, // picker divider
125
+ decorationColor: Colors.white // dialog background
126
+ ),
127
+ caption: TextStyle(
128
+ color: Palette.moderateLavender, // container (confirm exchange)
129
+ backgroundColor: Palette.moderateLavender, // button background (confirm exchange)
130
+
131
+
132
+
133
+
134
+ decorationColor: Palette.lavender, // gradient end, wallet label
135
+ ),
136
+
137
+
138
+
139
+ subtitle: TextStyle(
140
+ color: Palette.lightBlueGrey, // border color, wallet label
141
+ backgroundColor: Palette.lavender, // address field, wallet card
142
+ decorationColor: Palette.darkLavender // selected item
143
+ ),
144
+ headline: TextStyle(
145
+ color: Palette.darkLavender, // faq background
146
+ backgroundColor: Palette.lavender // faq extension
147
+ )
148
+ ),
149
150
151
@@ -127,27 +155,7 @@ class Themes {
155
),
156
157
130
- accentTextTheme: TextTheme(
131
- title: TextStyle(
132
- color: Palette.darkLavender, // top panel
133
- backgroundColor: Palette.lavender, // bottom panel
134
- decorationColor: PaletteDark.distantBlue // select button background color
135
- ),
136
- caption: TextStyle(
137
- color: Palette.blue, // current wallet label
138
- backgroundColor: Colors.white, // gradient start, wallet label
139
- decorationColor: Palette.lavender, // gradient end, wallet label
140
- ),
141
- subtitle: TextStyle(
142
- color: Palette.lightBlueGrey, // border color, wallet label
143
- backgroundColor: Palette.lavender, // address field, wallet card
144
- decorationColor: Palette.darkLavender // selected item
145
- ),
146
- headline: TextStyle(
147
- color: Palette.darkLavender, // faq background
148
- backgroundColor: Palette.lavender // faq extension
149
- )
150
- ),
158
+
159
);
160
161
@@ -266,6 +274,33 @@ class Themes {
274
)
275
),
276
focusColor: PaletteDark.moderateBlue, // text field button (exchange page)
277
+ accentTextTheme: TextTheme(
278
+ title: TextStyle(
279
+ color: PaletteDark.nightBlue, // picker background
280
+ backgroundColor: PaletteDark.dividerColor, // picker divider
281
+ decorationColor: PaletteDark.darkNightBlue // dialog background
282
+ ),
283
+ caption: TextStyle(
284
+ color: PaletteDark.nightBlue, // container (confirm exchange)
285
+ backgroundColor: PaletteDark.deepVioletBlue, // button background (confirm exchange)
286
+
287
+
288
+
289
+ decorationColor: PaletteDark.nightBlue, // gradient end, wallet label
290
+ ),
291
+
292
+
293
+
294
+ subtitle: TextStyle(
295
+ color: PaletteDark.darkNightBlue, // border color, wallet label
296
+ backgroundColor: PaletteDark.violetBlue, // address field, wallet card
297
+ decorationColor: PaletteDark.headerNightBlue // selected item
298
+ ),
299
+ headline: TextStyle(
300
+ color: PaletteDark.lightNightBlue, // faq background
301
+ backgroundColor: PaletteDark.headerNightBlue // faq extension
302
+ )
303
+ ),
304
305
306
@@ -276,27 +311,7 @@ class Themes {
311
312
313
279
- accentTextTheme: TextTheme(
280
- title: TextStyle(
281
- color: PaletteDark.moderateBlue, // top panel
282
- backgroundColor: PaletteDark.lightNightBlue, // bottom panel
283
- decorationColor: Colors.white // select button background color
284
- ),
285
- caption: TextStyle(
286
- color: Colors.white, // current wallet label
287
- backgroundColor: PaletteDark.distantBlue, // gradient start, wallet label
288
- decorationColor: PaletteDark.nightBlue, // gradient end, wallet label
289
- ),
290
- subtitle: TextStyle(
291
- color: PaletteDark.darkNightBlue, // border color, wallet label
292
- backgroundColor: PaletteDark.violetBlue, // address field, wallet card
293
- decorationColor: PaletteDark.headerNightBlue // selected item
294
- ),
295
- headline: TextStyle(
296
- color: PaletteDark.lightNightBlue, // faq background
297
- backgroundColor: PaletteDark.headerNightBlue // faq extension
298
- )
299
- ),
314
+
315
);
316
317
}
\ No newline at end of file
lib/view_model/dashboard/dashboard_view_model.dart
+2
-1
@@ -108,7 +108,8 @@ abstract class DashboardViewModelBase with Store {
108
109
_items
110
.addAll(transactionFilterStore.filtered(transactions: transactions));
111
- _items.addAll(tradeFilterStore.filtered(trades: trades));
111
+ //_items.addAll(tradeFilterStore.filtered(trades: trades));
112
+ _items.addAll(trades); // FIXME
113
114
return formattedItemsList(_items);
115
}
lib/view_model/exchange/exchange_view_model.dart
+1
-1
@@ -227,7 +227,7 @@ abstract class ExchangeViewModelBase with Store {
227
}
228
}
229
} else {
230
- tradeState = TradeIsCreatedFailure(error: S.current.error_text_limits_loading_failed("${provider.description}"));
230
+ tradeState = TradeIsCreatedFailure(error: S.current.error_text_limits_loading_failed('${provider.description}'));
231
}
232
233
}