Skip to content

Commit e41e06a

Browse files
zaelgoharyzaelgohary
committed
Revamp all app pages, unify border radius, use minimal & simple style & colors
1 parent d0516d0 commit e41e06a

22 files changed

Lines changed: 618 additions & 408 deletions

‎app/lib/main.dart‎

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ extension ColorSchemeExtension on ColorScheme {
3434
: const Color.fromARGB(255, 10, 10, 10);
3535
}
3636

37+
Color _blendColors(Color base, Color tint, double ratio) {
38+
return Color.lerp(base, tint, ratio) ?? base;
39+
}
40+
3741
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
3842

3943
final lastPausedProvider =
@@ -109,6 +113,15 @@ class MyApp extends ConsumerWidget {
109113
brightness: Brightness.light,
110114
seedColor: const Color.fromARGB(255, 26, 161, 143),
111115
);
116+
117+
kColorScheme = kColorScheme.copyWith(
118+
primaryContainer: _blendColors(
119+
kColorScheme.surfaceContainer,
120+
kColorScheme.primary,
121+
0.08,
122+
),
123+
onPrimaryContainer: kColorScheme.primary,
124+
);
112125

113126
var kDarkColorScheme = ColorScheme.fromSeed(
114127
brightness: Brightness.dark,
@@ -121,57 +134,69 @@ class MyApp extends ConsumerWidget {
121134
return AppLifecycleObserver(
122135
child: MaterialApp(
123136
navigatorKey: navigatorKey,
124-
theme: ThemeData().copyWith(
137+
theme: ThemeData(
138+
useMaterial3: true,
139+
).copyWith(
125140
colorScheme: kColorScheme,
126141
brightness: Brightness.light,
142+
scaffoldBackgroundColor: kColorScheme.surfaceContainerHighest,
127143
textTheme: textTheme,
128144
appBarTheme: const AppBarTheme().copyWith(
129-
backgroundColor: kColorScheme.primary,
130-
foregroundColor: kColorScheme.onPrimary,
145+
backgroundColor: kColorScheme.surfaceContainerHighest,
146+
foregroundColor: kColorScheme.onSurface,
147+
elevation: 0,
131148
),
132149
cardTheme: CardThemeData(
133150
color: kColorScheme.surfaceContainer,
134151
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8)),
135152
elevatedButtonTheme: ElevatedButtonThemeData(
136153
style: ElevatedButton.styleFrom(
137154
shape: RoundedRectangleBorder(
138-
borderRadius: BorderRadius.circular(5)),
139-
backgroundColor: kColorScheme.primaryContainer),
155+
borderRadius: BorderRadius.circular(12)),
156+
backgroundColor: kColorScheme.primaryContainer,
157+
foregroundColor: kColorScheme.onPrimaryContainer),
140158
),
141159
expansionTileTheme: const ExpansionTileThemeData().copyWith(
142-
backgroundColor: kColorScheme.backgroundDarker,
143-
collapsedBackgroundColor: ThemeData().colorScheme.surface),
160+
backgroundColor: kColorScheme.surfaceContainerHighest,
161+
collapsedBackgroundColor: kColorScheme.surfaceContainerHighest),
144162
bottomNavigationBarTheme:
145163
const BottomNavigationBarThemeData().copyWith(
164+
backgroundColor: kColorScheme.surfaceContainerHighest,
146165
selectedItemColor: kColorScheme.primary,
147166
unselectedItemColor: kColorScheme.secondary,
167+
elevation: 0,
148168
),
149169
),
150170
darkTheme: ThemeData(
151171
useMaterial3: true,
152172
colorScheme: kDarkColorScheme,
153173
brightness: Brightness.dark,
174+
scaffoldBackgroundColor: kDarkColorScheme.surfaceContainerHighest,
154175
textTheme: textTheme,
155176
appBarTheme: const AppBarTheme().copyWith(
156-
backgroundColor: kDarkColorScheme.primaryContainer,
157-
foregroundColor: kDarkColorScheme.onPrimaryContainer,
177+
backgroundColor: kDarkColorScheme.surfaceContainerHighest,
178+
foregroundColor: kDarkColorScheme.onSurface,
179+
elevation: 0,
158180
),
159181
cardTheme: CardThemeData(
160182
color: kDarkColorScheme.surfaceContainer,
161183
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8)),
162184
elevatedButtonTheme: ElevatedButtonThemeData(
163185
style: ElevatedButton.styleFrom(
164186
shape: RoundedRectangleBorder(
165-
borderRadius: BorderRadius.circular(5)),
166-
backgroundColor: kDarkColorScheme.primaryContainer),
187+
borderRadius: BorderRadius.circular(12)),
188+
backgroundColor: kDarkColorScheme.primaryContainer,
189+
foregroundColor: kDarkColorScheme.onPrimaryContainer),
167190
),
168191
expansionTileTheme: const ExpansionTileThemeData().copyWith(
169-
backgroundColor: kDarkColorScheme.backgroundDarker,
170-
collapsedBackgroundColor: kDarkColorScheme.surface),
192+
backgroundColor: kDarkColorScheme.surfaceContainerHighest,
193+
collapsedBackgroundColor: kDarkColorScheme.surfaceContainerHighest),
171194
bottomNavigationBarTheme:
172195
const BottomNavigationBarThemeData().copyWith(
196+
backgroundColor: kDarkColorScheme.surfaceContainerHighest,
173197
selectedItemColor: kDarkColorScheme.primary,
174198
unselectedItemColor: kDarkColorScheme.secondary,
199+
elevation: 0,
175200
),
176201
),
177202
themeMode: themeMode,

‎app/lib/screens/farm_screen.dart‎

Lines changed: 49 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -267,38 +267,64 @@ class _FarmScreenState extends ConsumerState<FarmScreen>
267267
Widget build(BuildContext context) {
268268
Widget mainWidget;
269269
if (loading) {
270-
mainWidget = Center(
271-
child: Column(
272-
mainAxisAlignment: MainAxisAlignment.center,
273-
mainAxisSize: MainAxisSize.min,
274-
children: [
275-
const CircularProgressIndicator(),
276-
const SizedBox(height: 16),
277-
Text(
278-
'Loading Farms...',
279-
style: Theme.of(context).textTheme.bodyLarge!.copyWith(
280-
color: Theme.of(context).colorScheme.onSurface,
281-
fontWeight: FontWeight.bold),
282-
),
283-
],
284-
));
285-
} else if (failed) {
286270
mainWidget = Center(
287271
child: Column(
288272
mainAxisAlignment: MainAxisAlignment.center,
289273
mainAxisSize: MainAxisSize.min,
290274
children: [
291-
ElevatedButton.icon(
292-
icon: const Icon(Icons.refresh),
293-
label: const Text('Try Again'),
294-
onPressed: () {
295-
listFarms();
296-
},
275+
const CircularProgressIndicator(),
276+
const SizedBox(height: 24),
277+
Text(
278+
'Loading Farms...',
279+
style: Theme.of(context).textTheme.bodyLarge!.copyWith(
280+
color: Theme.of(context).colorScheme.onSurfaceVariant,
281+
fontWeight: FontWeight.w500,
282+
),
297283
),
298-
const SizedBox(height: 16),
299284
],
300285
),
301286
);
287+
} else if (failed) {
288+
mainWidget = Center(
289+
child: Padding(
290+
padding: const EdgeInsets.all(24),
291+
child: Column(
292+
mainAxisAlignment: MainAxisAlignment.center,
293+
mainAxisSize: MainAxisSize.min,
294+
children: [
295+
Icon(
296+
Icons.error_outline,
297+
size: 64,
298+
color: Theme.of(context).colorScheme.error,
299+
),
300+
const SizedBox(height: 16),
301+
Text(
302+
'Failed to load farms',
303+
style: Theme.of(context).textTheme.titleLarge!.copyWith(
304+
color: Theme.of(context).colorScheme.onSurface,
305+
fontWeight: FontWeight.w600,
306+
),
307+
),
308+
const SizedBox(height: 8),
309+
Text(
310+
'Please check your connection and try again',
311+
textAlign: TextAlign.center,
312+
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
313+
color: Theme.of(context).colorScheme.onSurfaceVariant,
314+
),
315+
),
316+
const SizedBox(height: 32),
317+
ElevatedButton.icon(
318+
icon: const Icon(Icons.refresh),
319+
label: const Text('Try Again'),
320+
onPressed: () {
321+
listFarms();
322+
},
323+
),
324+
],
325+
),
326+
),
327+
);
302328
} else {
303329
mainWidget = Column(
304330
children: [

‎app/lib/screens/home_screen.dart‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,8 +206,11 @@ class _HomeScreenState extends ConsumerState<HomeScreen>
206206
Widget build(BuildContext context) {
207207
ProviderScope.containerOf(context, listen: false)
208208
.read(walletsNotifier.notifier);
209+
final colorScheme = Theme.of(context).colorScheme;
210+
209211
return Scaffold(
210212
resizeToAvoidBottomInset: false,
213+
backgroundColor: colorScheme.surfaceContainerHighest,
211214
appBar: PreferredSize(
212215
preferredSize: const Size.fromHeight(0),
213216
child: AppBar(

‎app/lib/screens/market/overview.dart‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -410,11 +410,15 @@ class _OverviewWidgetState extends ConsumerState<OverviewWidget> {
410410
child: Column(
411411
children: [
412412
Card(
413+
margin: const EdgeInsets.symmetric(horizontal: 16),
413414
shape: RoundedRectangleBorder(
414-
borderRadius: BorderRadius.circular(5),
415+
borderRadius: BorderRadius.circular(12),
415416
side: BorderSide(
416-
color: Theme.of(context).colorScheme.primary),
417+
color: Theme.of(context).colorScheme.outline.withOpacity(0.5),
418+
width: 1,
419+
),
417420
),
421+
elevation: 0,
418422
child: Padding(
419423
padding: const EdgeInsets.all(16.0),
420424
child: Column(
@@ -426,10 +430,10 @@ class _OverviewWidgetState extends ConsumerState<OverviewWidget> {
426430
.textTheme
427431
.titleLarge!
428432
.copyWith(
429-
fontWeight: FontWeight.bold,
433+
fontWeight: FontWeight.w600,
430434
color: Theme.of(context)
431435
.colorScheme
432-
.onSecondaryContainer),
436+
.onSurface),
433437
),
434438
Row(
435439
crossAxisAlignment:
@@ -471,13 +475,15 @@ class _OverviewWidgetState extends ConsumerState<OverviewWidget> {
471475
SizedBox(
472476
width: double.infinity,
473477
child: Card(
478+
margin: const EdgeInsets.symmetric(horizontal: 16),
474479
shape: RoundedRectangleBorder(
475-
borderRadius: BorderRadius.circular(5),
480+
borderRadius: BorderRadius.circular(12),
476481
side: BorderSide(
477-
color: Theme.of(context)
478-
.colorScheme
479-
.primary),
482+
color: Theme.of(context).colorScheme.outline.withOpacity(0.5),
483+
width: 1,
484+
),
480485
),
486+
elevation: 0,
481487
child: Padding(
482488
padding: const EdgeInsets.all(16.0),
483489
child: Column(
@@ -490,10 +496,10 @@ class _OverviewWidgetState extends ConsumerState<OverviewWidget> {
490496
.textTheme
491497
.titleLarge!
492498
.copyWith(
493-
fontWeight: FontWeight.bold,
499+
fontWeight: FontWeight.w600,
494500
color: Theme.of(context)
495501
.colorScheme
496-
.onSecondaryContainer),
502+
.onSurface),
497503
),
498504
Column(
499505
crossAxisAlignment:

‎app/lib/screens/preference_screen.dart‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,18 @@ class _PreferenceScreenState extends ConsumerState<PreferenceScreen> {
9797
return LayoutDrawer(
9898
titleText: 'Settings',
9999
content: ListView(
100+
padding: const EdgeInsets.symmetric(vertical: 8),
100101
children: <Widget>[
101-
const ListTile(
102-
title: Text('Global settings'),
102+
Padding(
103+
padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
104+
child: Text(
105+
'Global settings',
106+
style: Theme.of(context).textTheme.titleSmall!.copyWith(
107+
color: Theme.of(context).colorScheme.onSurfaceVariant,
108+
fontWeight: FontWeight.w600,
109+
letterSpacing: 0.5,
110+
),
111+
),
103112
),
104113
FutureBuilder(
105114
future: checkBiometrics(),
@@ -212,6 +221,18 @@ class _PreferenceScreenState extends ConsumerState<PreferenceScreen> {
212221
),
213222
),
214223
),
224+
const Divider(height: 1),
225+
Padding(
226+
padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
227+
child: Text(
228+
'About',
229+
style: Theme.of(context).textTheme.titleSmall!.copyWith(
230+
color: Theme.of(context).colorScheme.onSurfaceVariant,
231+
fontWeight: FontWeight.w600,
232+
letterSpacing: 0.5,
233+
),
234+
),
235+
),
215236
ListTile(
216237
leading: const Icon(Icons.perm_device_information),
217238
title: Text('Version: $version - $buildNumber'),
@@ -224,6 +245,18 @@ class _PreferenceScreenState extends ConsumerState<PreferenceScreen> {
224245
title: const Text('Terms and conditions'),
225246
onTap: () async => {await _showTermsAndConds()},
226247
),
248+
const Divider(height: 1),
249+
Padding(
250+
padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
251+
child: Text(
252+
'Account',
253+
style: Theme.of(context).textTheme.titleSmall!.copyWith(
254+
color: Theme.of(context).colorScheme.onSurfaceVariant,
255+
fontWeight: FontWeight.w600,
256+
letterSpacing: 0.5,
257+
),
258+
),
259+
),
227260
ListTile(
228261
leading: const Icon(Icons.logout_outlined),
229262
title: Text(

0 commit comments

Comments
 (0)