CAKE-19 | created qr_widget (new design) and address_page; applied address page to dashboard page
Oleksandr Sobol committed
Jul 27, 2020 at 20:07 UTC
706d16b34680dec4b216978d448a0cbaa86d7593
7 files changed
+210
-4
assets/images/copy_address.png
Binary files /dev/null and b/assets/images/copy_address.png differ
lib/di.dart
+3
-1
@@ -183,7 +183,9 @@ Future setup(
183
closable: false));
184
185
getIt.registerFactory<DashboardPage>(
186
- () => DashboardPage(walletViewModel: getIt.get<DashboardViewModel>()));
186
+ () => DashboardPage(
187
+ walletViewModel: getIt.get<DashboardViewModel>(),
188
+ addressListViewModel: getIt.get<WalletAddressListViewModel>()));
189
190
getIt.registerFactory<ReceivePage>(() => ReceivePage(
191
addressListViewModel: getIt.get<WalletAddressListViewModel>()));
lib/palette.dart
+4
@@ -34,6 +34,7 @@ class PaletteDark {
34
static const Color backgroundColor = Color.fromRGBO(25, 35, 60, 1.0);
35
static const Color nightBlue = Color.fromRGBO(35, 47, 79, 1.0);
36
static const Color wildNightBlue = Color.fromRGBO(39, 53, 96, 1.0);
37
+ static const Color distantNightBlue = Color.fromRGBO(46, 57, 96, 1.0);
38
static const Color cyanBlue = Color.fromRGBO(99, 113, 150, 1.0);
39
static const Color darkCyanBlue = Color.fromRGBO(91, 112, 146, 1.0);
40
static const Color orangeYellow = Color.fromRGBO(243, 166, 50, 1.0);
@@ -41,6 +42,9 @@ class PaletteDark {
42
static const Color oceanBlue = Color.fromRGBO(27, 39, 71, 1.0);
43
static const Color lightNightBlue = Color.fromRGBO(39, 52, 89, 1.0);
44
static const Color wildBlue = Color.fromRGBO(165, 176, 205, 1.0);
45
+ static const Color lightBlueGrey = Color.fromRGBO(125, 141, 183, 1.0);
46
+ static const Color darkGrey = Color.fromRGBO(118, 131, 169, 1.0);
47
+ static const Color dividerColor = Color.fromRGBO(48, 59, 95, 1.0);
48
49
// FIXME: Rename.
50
static const Color eee = Color.fromRGBO(236, 239, 245, 1.0);
lib/src/screens/dashboard/dashboard_page.dart
+9
-2
@@ -9,13 +9,18 @@ import 'package:cake_wallet/palette.dart';
9
import 'package:dots_indicator/dots_indicator.dart';
10
import 'package:cake_wallet/src/screens/dashboard/widgets/action_button.dart';
11
import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart';
12
+import 'package:cake_wallet/src/screens/dashboard/widgets/address_page.dart';
13
import 'package:cake_wallet/src/screens/dashboard/widgets/transactions_page.dart';
14
import 'package:flutter_mobx/flutter_mobx.dart';
15
import 'package:mobx/mobx.dart';
16
import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.dart';
17
+import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_view_model.dart';
18
19
class DashboardPage extends BasePage {
18
- DashboardPage({@required this.walletViewModel});
20
+ DashboardPage({
21
+ @required this.walletViewModel,
22
+ @required this.addressListViewModel,
23
+ });
24
25
@override
26
Color get backgroundLightColor => PaletteDark.backgroundColor;
@@ -54,13 +59,14 @@ class DashboardPage extends BasePage {
59
}
60
61
final DashboardViewModel walletViewModel;
62
+ final WalletAddressListViewModel addressListViewModel;
63
final sendImage = Image.asset('assets/images/upload.png',
64
height: 22.24, width: 24, color: Colors.white);
65
final exchangeImage = Image.asset('assets/images/transfer.png',
66
height: 24.27, width: 22.25, color: Colors.white);
67
final receiveImage = Image.asset('assets/images/download.png',
68
height: 22.24, width: 24, color: Colors.white);
63
- final controller = PageController(initialPage: 0);
69
+ final controller = PageController(initialPage: 1);
70
71
var pages = <Widget>[];
72
bool _isEffectsInstalled = false;
@@ -147,6 +153,7 @@ class DashboardPage extends BasePage {
153
return;
154
}
155
156
+ pages.add(AddressPage(addressListViewModel: addressListViewModel));
157
pages.add(BalancePage(dashboardViewModel: walletViewModel));
158
pages.add(TransactionsPage(dashboardViewModel: walletViewModel));
159
lib/src/screens/dashboard/widgets/address_page.dart
new
+59
@@ -0,0 +1,59 @@
1
+import 'package:flutter/material.dart';
2
+import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_view_model.dart';
3
+import 'package:cake_wallet/palette.dart';
4
+import 'package:cake_wallet/src/screens/receive/widgets/qr_widget.dart';
5
+import 'package:cake_wallet/routes.dart';
6
+import 'package:cake_wallet/generated/i18n.dart';
7
+
8
+class AddressPage extends StatelessWidget {
9
+ AddressPage({@required this.addressListViewModel});
10
+
11
+ final WalletAddressListViewModel addressListViewModel;
12
+
13
+ @override
14
+ Widget build(BuildContext context) {
15
+ return Container(
16
+ padding: EdgeInsets.fromLTRB(24, 24, 24, 32),
17
+ child: Column(
18
+ children: <Widget>[
19
+ Expanded(
20
+ child: Center(
21
+ child: QRWidget(addressListViewModel: addressListViewModel),
22
+ )
23
+ ),
24
+ GestureDetector(
25
+ onTap: () => Navigator.of(context).pushNamed(Routes.receive),
26
+ child: Container(
27
+ height: 50,
28
+ padding: EdgeInsets.only(left: 24, right: 12),
29
+ alignment: Alignment.center,
30
+ decoration: BoxDecoration(
31
+ borderRadius: BorderRadius.all(Radius.circular(25)),
32
+ color: PaletteDark.nightBlue
33
+ ),
34
+ child: Row(
35
+ mainAxisSize: MainAxisSize.max,
36
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
37
+ children: <Widget>[
38
+ Text(
39
+ S.of(context).addresses,
40
+ style: TextStyle(
41
+ fontSize: 14,
42
+ fontWeight: FontWeight.w500,
43
+ color: Colors.white
44
+ ),
45
+ ),
46
+ Icon(
47
+ Icons.arrow_forward_ios,
48
+ size: 14,
49
+ color: Colors.white,
50
+ )
51
+ ],
52
+ ),
53
+ ),
54
+ )
55
+ ],
56
+ ),
57
+ );
58
+ }
59
+}
\ No newline at end of file
lib/src/screens/receive/widgets/qr_widget.dart
new
+134
@@ -0,0 +1,134 @@
1
+import 'package:flutter/material.dart';
2
+import 'package:flutter/cupertino.dart';
3
+import 'package:flutter/services.dart';
4
+import 'package:flutter_mobx/flutter_mobx.dart';
5
+import 'package:cake_wallet/generated/i18n.dart';
6
+import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart';
7
+import 'package:cake_wallet/src/widgets/base_text_form_field.dart';
8
+import 'package:cake_wallet/core/amount_validator.dart';
9
+import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_view_model.dart';
10
+import 'package:cake_wallet/palette.dart';
11
+
12
+class QRWidget extends StatelessWidget {
13
+ QRWidget({
14
+ @required this.addressListViewModel,
15
+ this.isAmountFieldShow = false
16
+ }) : amountController = TextEditingController(),
17
+ _formKey = GlobalKey<FormState>() {
18
+ amountController.addListener(() => addressListViewModel.amount =
19
+ _formKey.currentState.validate() ? amountController.text : '');
20
+ }
21
+
22
+ final WalletAddressListViewModel addressListViewModel;
23
+ final bool isAmountFieldShow;
24
+ final TextEditingController amountController;
25
+ final GlobalKey<FormState> _formKey;
26
+
27
+ @override
28
+ Widget build(BuildContext context) {
29
+ final copyImage = Image.asset('assets/images/copy_address.png',
30
+ color: PaletteDark.lightBlueGrey);
31
+ final addressTopOffset = isAmountFieldShow ? 60.0 : 40.0;
32
+
33
+ return Column(
34
+ mainAxisSize: MainAxisSize.min,
35
+ crossAxisAlignment: CrossAxisAlignment.center,
36
+ children: <Widget>[
37
+ Row(children: <Widget>[
38
+ Spacer(flex: 2),
39
+ Observer(
40
+ builder: (_) => Flexible(
41
+ flex: 3,
42
+ child: Center(
43
+ child: AspectRatio(
44
+ aspectRatio: 1.0,
45
+ child: QrImage(
46
+ data: addressListViewModel.uri.toString(),
47
+ backgroundColor: Colors.transparent,
48
+ foregroundColor: PaletteDark.lightBlueGrey,
49
+ ))))),
50
+ Spacer(flex: 2)
51
+ ]),
52
+ Padding(
53
+ padding: EdgeInsets.only(top: 20),
54
+ child: Text(
55
+ 'Scan the QR code to get the address',
56
+ style: TextStyle(
57
+ fontSize: 12,
58
+ fontWeight: FontWeight.w500,
59
+ color: PaletteDark.cyanBlue
60
+ ),
61
+ ),
62
+ ),
63
+ isAmountFieldShow
64
+ ? Padding(
65
+ padding: EdgeInsets.only(top: 60),
66
+ child: Row(
67
+ children: <Widget>[
68
+ Expanded(
69
+ child: Form(
70
+ key: _formKey,
71
+ child: BaseTextFormField(
72
+ controller: amountController,
73
+ keyboardType:
74
+ TextInputType.numberWithOptions(decimal: true),
75
+ inputFormatters: [
76
+ BlacklistingTextInputFormatter(
77
+ RegExp('[\\-|\\ |\\,]'))
78
+ ],
79
+ textAlign: TextAlign.center,
80
+ hintText: S.of(context).receive_amount,
81
+ borderColor: PaletteDark.darkGrey,
82
+ validator: AmountValidator(),
83
+ autovalidate: true,
84
+ placeholderTextStyle: TextStyle(
85
+ color: PaletteDark.cyanBlue,
86
+ fontSize: 18,
87
+ fontWeight: FontWeight.w500))))
88
+ ],
89
+ ),
90
+ )
91
+ : Offstage(),
92
+ Padding(
93
+ padding: EdgeInsets.only(top: addressTopOffset),
94
+ child: Builder(
95
+ builder: (context) => Observer(
96
+ builder: (context) => GestureDetector(
97
+ onTap: () {
98
+ Clipboard.setData(ClipboardData(
99
+ text: addressListViewModel.address.address));
100
+ Scaffold.of(context).showSnackBar(SnackBar(
101
+ content: Text(
102
+ S.of(context).copied_to_clipboard,
103
+ style: TextStyle(color: Colors.white),
104
+ ),
105
+ backgroundColor: Colors.green,
106
+ duration: Duration(milliseconds: 500),
107
+ ));
108
+ },
109
+ child: Row(
110
+ mainAxisSize: MainAxisSize.max,
111
+ children: <Widget>[
112
+ Expanded(
113
+ child: Text(
114
+ addressListViewModel.address.address,
115
+ maxLines: 1,
116
+ overflow: TextOverflow.ellipsis,
117
+ style: TextStyle(
118
+ fontSize: 16,
119
+ fontWeight: FontWeight.w500,
120
+ color: Colors.white),
121
+ ),
122
+ ),
123
+ Padding(
124
+ padding: EdgeInsets.only(left: 12),
125
+ child: copyImage,
126
+ )
127
+ ],
128
+ ),
129
+ ))),
130
+ )
131
+ ],
132
+ );
133
+ }
134
+}
\ No newline at end of file
lib/view_model/dashboard/dashboard_view_model.dart
+1
-1
@@ -54,7 +54,7 @@ abstract class DashboardViewModelBase with Store {
54
subname = _wallet.account?.label;
55
}
56
57
- currentPage = 0;
57
+ currentPage = 1;
58
}
59
60
@observable