Redesigned bottom bar of main screen according Figma (#279)
* Redesigned bottom bar of main screen according Figma * used receiced_icon from figma instead of that present in asset/image folder * removed border colors for dark and light modes * removed fixed width and height
Rafia Rahman Chowdhury committed
Mar 15, 2022 at 20:13 UTC
987e6f21ee66b7acb951c7542be964a43ad17b91
5 files changed
+56
-40
assets/images/buy.png
Binary files /dev/null and b/assets/images/buy.png differ
assets/images/received.png
Binary files /dev/null and b/assets/images/received.png differ
assets/images/sell.png
Binary files /dev/null and b/assets/images/sell.png differ
lib/src/screens/dashboard/dashboard_page.dart
+53
-34
@@ -92,19 +92,23 @@ class DashboardPage extends BasePage {
92
@override
93
Widget body(BuildContext context) {
94
final sendImage = Image.asset('assets/images/upload.png',
95
- height: 22.24,
95
+ height: 24,
96
+ width: 24,
97
+ color: Theme.of(context).accentTextTheme.display3.backgroundColor);
98
+ final receiveImage = Image.asset('assets/images/received.png',
99
+ height: 24,
100
width: 24,
101
color: Theme.of(context).accentTextTheme.display3.backgroundColor);
102
final exchangeImage = Image.asset('assets/images/transfer.png',
99
- height: 24.27,
100
- width: 22.25,
103
+ height: 24,
104
+ width: 24,
105
color: Theme.of(context).accentTextTheme.display3.backgroundColor);
102
- final buyImage = Image.asset('assets/images/coins.png',
103
- height: 22.24,
106
+ final buyImage = Image.asset('assets/images/buy.png',
107
+ height: 24,
108
width: 24,
109
color: Theme.of(context).accentTextTheme.display3.backgroundColor);
106
- final sellImage = Image.asset('assets/images/restore_wallet_image.png',
107
- height: 22.24,
110
+ final sellImage = Image.asset('assets/images/sell.png',
111
+ height: 24,
112
width: 24,
113
color: Theme.of(context).accentTextTheme.display3.backgroundColor);
114
_setEffects(context);
@@ -134,34 +138,49 @@ class DashboardPage extends BasePage {
138
.display1
139
.backgroundColor),
140
)),
137
- Container(
138
- padding: EdgeInsets.only(left: 45, right: 45, bottom: 24),
139
- child: Row(
140
- mainAxisAlignment: MainAxisAlignment.spaceAround,
141
- children: <Widget>[
142
- ActionButton(
143
- image: sendImage,
144
- title: S.of(context).send,
145
- route: Routes.send),
146
- ActionButton(
147
- image: exchangeImage,
148
- title: S.of(context).exchange,
149
- route: Routes.exchange),
150
- if (!isMoneroOnly)
151
- ActionButton(
152
- image: buyImage,
153
- title: S.of(context).buy,
154
- onClick: () async => await _onClickBuyButton(context),
141
+
142
+ ClipRect(
143
+ child:Container(
144
+ margin: const EdgeInsets.only(left: 16, right: 16, bottom: 38),
145
+ child: Container(
146
+ decoration: BoxDecoration(
147
+ borderRadius: BorderRadius.circular(50.0),
148
+ border: Border.all(color: currentTheme.type == ThemeType.bright ? Color.fromRGBO(255, 255, 255, 0.2): Colors.transparent, width: 1, ),
149
+ color:Theme.of(context).textTheme.title.backgroundColor
150
),
156
- if (!isMoneroOnly)
151
+ child: Container(
152
+ padding: EdgeInsets.only(left: 32, right: 32, bottom: 14, top: 16),
153
+ child: Row(
154
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
155
+ children: <Widget>[
156
+ if (!isMoneroOnly)
157
+ ActionButton(
158
+ image: buyImage,
159
+ title: S.of(context).buy,
160
+ onClick: () async => await _onClickBuyButton(context),
161
+ ),
162
ActionButton(
158
- image: sellImage,
159
- title: S.of(context).sell,
160
- onClick: () async => await _onClickSellButton(context),
161
- ),
162
- ],
163
- ),
164
- )
163
+ image: receiveImage,
164
+ title: S.of(context).receive,
165
+ route: Routes.receive),
166
+ ActionButton(
167
+ image: exchangeImage,
168
+ title: S.of(context).exchange,
169
+ route: Routes.exchange),
170
+ ActionButton(
171
+ image: sendImage,
172
+ title: S.of(context).send,
173
+ route: Routes.send),
174
+ if (!isMoneroOnly)
175
+ ActionButton(
176
+ image: sellImage,
177
+ title: S.of(context).sell,
178
+ onClick: () async => await _onClickSellButton(context),
179
+ ),
180
+ ],
181
+ ),),
182
+ ),),),
183
+
184
],
185
));
186
}
@@ -268,4 +287,4 @@ class DashboardPage extends BasePage {
287
});
288
}
289
}
271
-}
290
+}
\ No newline at end of file
lib/src/screens/dashboard/widgets/action_button.dart
+3
-6
@@ -20,7 +20,6 @@ class ActionButton extends StatelessWidget {
20
alignment: alignment,
21
child: Column(
22
mainAxisSize: MainAxisSize.max,
23
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
23
crossAxisAlignment: CrossAxisAlignment.center,
24
children: <Widget>[
25
GestureDetector(
@@ -32,19 +31,17 @@ class ActionButton extends StatelessWidget {
31
}
32
},
33
child: Container(
35
- height: 60,
36
- width: 60,
34
alignment: Alignment.center,
35
decoration: BoxDecoration(
39
- color: Theme.of(context).buttonColor, shape: BoxShape.circle),
36
+ shape: BoxShape.circle),
37
child: image,
38
),
39
),
43
- SizedBox(height: 15),
40
+ SizedBox(height: 4),
41
Text(
42
title,
43
style: TextStyle(
47
- fontSize: 14,
44
+ fontSize: 10,
45
color: Theme.of(context).accentTextTheme.display3
46
.backgroundColor),
47
)