CWA-198 | changed background color of dashboard page; added color of bounds and shadows to wallet card; changed color of buttons in the button_header
Oleksandr Sobol committed
Apr 30, 2020 at 20:35 UTC
3cd8af422814ca939e37387206eb40839d4a4959
9 files changed
+74
-57
assets/images/2.0x/header.png
Binary files /dev/null and b/assets/images/2.0x/header.png differ
assets/images/3.0x/header.png
Binary files /dev/null and b/assets/images/3.0x/header.png differ
assets/images/header.png
Binary files /dev/null and b/assets/images/header.png differ
lib/palette.dart
+2
@@ -74,6 +74,8 @@ class PaletteDark {
74
75
static const Color backgroundStart = Color.fromRGBO(231, 240, 253, 1.0);
76
static const Color backgroundEnd = Color.fromRGBO(172, 203, 238, 1.0);
77
+ static const Color mainBackgroundColor = Color.fromRGBO(70, 85, 133, 1.0);
78
+ static const Color borderCardColor = Color.fromRGBO(81, 96, 147, 1.0);
79
static const Color walletCardTopStartSync = Color.fromRGBO(89, 104, 152, 1.0);
80
static const Color walletCardBottomStartSync = Color.fromRGBO(70, 85, 133, 1.0);
81
static const Color walletCardTopEndSync = Color.fromRGBO(70, 85, 133, 1.0);
lib/src/screens/base_page.dart
+9
-6
@@ -81,9 +81,10 @@ abstract class BasePage extends StatelessWidget {
81
leading: leading(context),
82
middle: middle(context),
83
trailing: trailing(context),
84
- backgroundColor: _isDarkTheme
84
+ backgroundColor: backgroundColor);
85
+ /*backgroundColor: _isDarkTheme
86
? Theme.of(context).backgroundColor
86
- : backgroundColor);
87
+ : backgroundColor);*/
88
89
case AppBarStyle.withShadow:
90
return NavBar.withShadow(
@@ -91,9 +92,10 @@ abstract class BasePage extends StatelessWidget {
92
leading: leading(context),
93
middle: middle(context),
94
trailing: trailing(context),
94
- backgroundColor: _isDarkTheme
95
+ backgroundColor: backgroundColor);
96
+ /*backgroundColor: _isDarkTheme
97
? Theme.of(context).backgroundColor
96
- : backgroundColor);
98
+ : backgroundColor);*/
99
100
default:
101
return NavBar(
@@ -101,9 +103,10 @@ abstract class BasePage extends StatelessWidget {
103
leading: leading(context),
104
middle: middle(context),
105
trailing: trailing(context),
104
- backgroundColor: _isDarkTheme
106
+ backgroundColor: backgroundColor);
107
+ /*backgroundColor: _isDarkTheme
108
? Theme.of(context).backgroundColor
106
- : backgroundColor);
109
+ : backgroundColor);*/
110
}
111
}
112
lib/src/screens/dashboard/dashboard_page.dart
+22
-29
@@ -9,7 +9,26 @@ class DashboardPage extends BasePage {
9
final _bodyKey = GlobalKey();
10
11
@override
12
- ObstructingPreferredSizeWidget appBar(BuildContext context) => null;
12
+ Color get backgroundColor => PaletteDark.mainBackgroundColor;
13
+
14
+ @override
15
+ Widget trailing(BuildContext context) {
16
+ final menuButton = Image.asset('assets/images/header.png');
17
+
18
+ return SizedBox(
19
+ height: 37,
20
+ width: 37,
21
+ child: ButtonTheme(
22
+ minWidth: double.minPositive,
23
+ child: FlatButton(
24
+ highlightColor: Colors.transparent,
25
+ splashColor: Colors.transparent,
26
+ padding: EdgeInsets.all(0),
27
+ onPressed: () {},
28
+ child: menuButton),
29
+ ),
30
+ );
31
+ }
32
33
@override
34
Widget body(BuildContext context) => DashboardPageBody(key: _bodyKey);
@@ -23,43 +42,17 @@ class DashboardPageBody extends StatefulWidget {
42
}
43
44
class DashboardPageBodyState extends State<DashboardPageBody> {
26
- final menuButton = Image.asset('assets/images/menu_button.png');
45
46
@override
47
Widget build(BuildContext context) {
30
- final List<Color> colors = [PaletteDark.backgroundStart, PaletteDark.backgroundEnd];
48
49
return SafeArea(
50
child: Container(
34
- decoration: BoxDecoration(
35
- gradient: LinearGradient(
36
- colors: colors
37
- )
38
- ),
51
+ color: PaletteDark.mainBackgroundColor,
52
child: Column(
53
children: <Widget>[
54
Padding(
42
- padding: EdgeInsets.only(top: 14),
43
- child: Container(
44
- width: double.infinity,
45
- alignment: Alignment.centerRight,
46
- child: SizedBox(
47
- height: 37,
48
- width: 37,
49
- child: ButtonTheme(
50
- minWidth: double.minPositive,
51
- child: FlatButton(
52
- highlightColor: Colors.transparent,
53
- splashColor: Colors.transparent,
54
- padding: EdgeInsets.all(0),
55
- onPressed: () {},
56
- child: menuButton),
57
- ),
58
- ),
59
- )
60
- ),
61
- Padding(
62
- padding: EdgeInsets.only(left: 20, top: 23),
55
+ padding: EdgeInsets.only(left: 20, top: 10),
56
child: WalletCard(),
57
),
58
SizedBox(
lib/src/screens/dashboard/widgets/button_header.dart
+1
-1
@@ -274,7 +274,7 @@ class ButtonHeader extends SliverPersistentHeaderDelegate {
274
width: 48,
275
alignment: Alignment.center,
276
decoration: BoxDecoration(
277
- color: Colors.white,
277
+ color: PaletteDark.borderCardColor,
278
shape: BoxShape.circle
279
),
280
child: image,
lib/src/screens/dashboard/widgets/wallet_card.dart
+31
-15
@@ -24,7 +24,7 @@ class WalletCardState extends State<WalletCard> {
24
final _balanceObserverKey = GlobalKey();
25
final _addressObserverKey = GlobalKey();
26
27
- final List<Color> colorsSync = [PaletteDark.walletCardTopEndSync, PaletteDark.walletCardBottomEndSync];
27
+ final List<Color> colorsSync = [PaletteDark.walletCardSubAddressField, PaletteDark.walletCardBottomEndSync];
28
double cardWidth;
29
double cardHeight;
30
double screenWidth;
@@ -67,20 +67,34 @@ class WalletCardState extends State<WalletCard> {
67
height: cardHeight,
68
duration: Duration(milliseconds: 500),
69
curve: Curves.fastOutSlowIn,
70
+ padding: EdgeInsets.only(
71
+ top: 1,
72
+ left: 1,
73
+ bottom: 1
74
+ ),
75
decoration: BoxDecoration(
71
- borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
72
- gradient: LinearGradient(
73
- colors: [PaletteDark.walletCardTopStartSync.withOpacity(opacity),
74
- PaletteDark.walletCardBottomStartSync.withOpacity(opacity)],
75
- begin: Alignment.topCenter,
76
- end: Alignment.bottomCenter
77
- )
76
+ borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
77
+ color: PaletteDark.borderCardColor,
78
+ boxShadow: [
79
+ BoxShadow(
80
+ color: PaletteDark.historyPanel.withOpacity(0.5),
81
+ blurRadius: 8,
82
+ offset: Offset(5, 5))
83
+ ]
84
),
79
- child: InkWell(
80
- onTap: () => setState(() => isFrontSide = !isFrontSide),
81
- child: isFrontSide
82
- ? frontSide()
83
- : backSide()
85
+ child: Container(
86
+ width: cardWidth,
87
+ height: cardHeight,
88
+ decoration: BoxDecoration(
89
+ borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
90
+ color: PaletteDark.historyPanel
91
+ ),
92
+ child: InkWell(
93
+ onTap: () => setState(() => isFrontSide = !isFrontSide),
94
+ child: isFrontSide
95
+ ? frontSide()
96
+ : backSide()
97
+ ),
98
),
99
),
100
);
@@ -99,6 +113,7 @@ class WalletCardState extends State<WalletCard> {
113
final status = syncStore.status;
114
final statusText = status.title();
115
final progress = syncStore.status.progress();
116
+ final indicatorWidth = progress * cardWidth;
117
118
String shortAddress = walletStore.subaddress.address;
119
shortAddress = shortAddress.replaceRange(4, shortAddress.length - 4, '...');
@@ -123,9 +138,10 @@ class WalletCardState extends State<WalletCard> {
138
height: cardHeight,
139
child: Stack(
140
children: <Widget>[
126
- Container(
141
+ AnimatedContainer(
142
+ duration: Duration(milliseconds: 0),
143
height: cardHeight,
128
- width: progress * cardWidth,
144
+ width: indicatorWidth,
145
decoration: BoxDecoration(
146
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
147
gradient: LinearGradient(
lib/src/widgets/nav_bar.dart
+9
-6
@@ -19,8 +19,9 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
19
middle: middle,
20
trailing: trailing,
21
height: _height,
22
- backgroundColor:
23
- _isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor);
22
+ backgroundColor: backgroundColor);
23
+ /*backgroundColor:
24
+ _isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor);*/
25
}
26
27
factory NavBar.withShadow(
@@ -37,12 +38,14 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
38
middle: middle,
39
trailing: trailing,
40
height: 80,
40
- backgroundColor:
41
- _isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor,
41
+ backgroundColor: backgroundColor,
42
+ /*backgroundColor:
43
+ _isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor,*/
44
decoration: BoxDecoration(
43
- color: _isDarkTheme
45
+ color: backgroundColor,
46
+ /*_isDarkTheme
47
? Theme.of(context).backgroundColor
45
- : backgroundColor,
48
+ : backgroundColor,*/
49
boxShadow: [
50
BoxShadow(
51
color: Color.fromRGBO(132, 141, 198, 0.11),