Skip to content

Revamp app style #1196

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zaelgohary wants to merge 1 commit into
base: development
Choose a base branch
from
Open

Revamp app style #1196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 38 additions & 13 deletions app/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ extension ColorSchemeExtension on ColorScheme {
: const Color.fromARGB(255, 10, 10, 10);
}

Color _blendColors(Color base, Color tint, double ratio) {
return Color.lerp(base, tint, ratio) ?? base;
}

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

final lastPausedProvider =
Expand Down Expand Up @@ -109,6 +113,15 @@ class MyApp extends ConsumerWidget {
brightness: Brightness.light,
seedColor: const Color.fromARGB(255, 26, 161, 143),
);

kColorScheme = kColorScheme.copyWith(
primaryContainer: _blendColors(
kColorScheme.surfaceContainer,
kColorScheme.primary,
0.08,
),
onPrimaryContainer: kColorScheme.primary,
);

var kDarkColorScheme = ColorScheme.fromSeed(
brightness: Brightness.dark,
Expand All @@ -121,57 +134,69 @@ class MyApp extends ConsumerWidget {
return AppLifecycleObserver(
child: MaterialApp(
navigatorKey: navigatorKey,
theme: ThemeData().copyWith(
theme: ThemeData(
useMaterial3: true,
).copyWith(
colorScheme: kColorScheme,
brightness: Brightness.light,
scaffoldBackgroundColor: kColorScheme.surfaceContainerHighest,
textTheme: textTheme,
appBarTheme: const AppBarTheme().copyWith(
backgroundColor: kColorScheme.primary,
foregroundColor: kColorScheme.onPrimary,
backgroundColor: kColorScheme.surfaceContainerHighest,
foregroundColor: kColorScheme.onSurface,
elevation: 0,
),
cardTheme: CardThemeData(
color: kColorScheme.surfaceContainer,
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8)),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)),
backgroundColor: kColorScheme.primaryContainer),
borderRadius: BorderRadius.circular(12)),
backgroundColor: kColorScheme.primaryContainer,
foregroundColor: kColorScheme.onPrimaryContainer),
),
expansionTileTheme: const ExpansionTileThemeData().copyWith(
backgroundColor: kColorScheme.backgroundDarker,
collapsedBackgroundColor: ThemeData().colorScheme.surface),
backgroundColor: kColorScheme.surfaceContainerHighest,
collapsedBackgroundColor: kColorScheme.surfaceContainerHighest),
bottomNavigationBarTheme:
const BottomNavigationBarThemeData().copyWith(
backgroundColor: kColorScheme.surfaceContainerHighest,
selectedItemColor: kColorScheme.primary,
unselectedItemColor: kColorScheme.secondary,
elevation: 0,
),
),
darkTheme: ThemeData(
useMaterial3: true,
colorScheme: kDarkColorScheme,
brightness: Brightness.dark,
scaffoldBackgroundColor: kDarkColorScheme.surfaceContainerHighest,
textTheme: textTheme,
appBarTheme: const AppBarTheme().copyWith(
backgroundColor: kDarkColorScheme.primaryContainer,
foregroundColor: kDarkColorScheme.onPrimaryContainer,
backgroundColor: kDarkColorScheme.surfaceContainerHighest,
foregroundColor: kDarkColorScheme.onSurface,
elevation: 0,
),
cardTheme: CardThemeData(
color: kDarkColorScheme.surfaceContainer,
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8)),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)),
backgroundColor: kDarkColorScheme.primaryContainer),
borderRadius: BorderRadius.circular(12)),
backgroundColor: kDarkColorScheme.primaryContainer,
foregroundColor: kDarkColorScheme.onPrimaryContainer),
),
expansionTileTheme: const ExpansionTileThemeData().copyWith(
backgroundColor: kDarkColorScheme.backgroundDarker,
collapsedBackgroundColor: kDarkColorScheme.surface),
backgroundColor: kDarkColorScheme.surfaceContainerHighest,
collapsedBackgroundColor: kDarkColorScheme.surfaceContainerHighest),
bottomNavigationBarTheme:
const BottomNavigationBarThemeData().copyWith(
backgroundColor: kDarkColorScheme.surfaceContainerHighest,
selectedItemColor: kDarkColorScheme.primary,
unselectedItemColor: kDarkColorScheme.secondary,
elevation: 0,
),
),
themeMode: themeMode,
Expand Down
72 changes: 49 additions & 23 deletions app/lib/screens/farm_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,38 +267,64 @@ class _FarmScreenState extends ConsumerState<FarmScreen>
Widget build(BuildContext context) {
Widget mainWidget;
if (loading) {
mainWidget = Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
const CircularProgressIndicator(),
const SizedBox(height: 16),
Text(
'Loading Farms...',
style: Theme.of(context).textTheme.bodyLarge!.copyWith(
color: Theme.of(context).colorScheme.onSurface,
fontWeight: FontWeight.bold),
),
],
));
} else if (failed) {
mainWidget = Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton.icon(
icon: const Icon(Icons.refresh),
label: const Text('Try Again'),
onPressed: () {
listFarms();
},
const CircularProgressIndicator(),
const SizedBox(height: 24),
Text(
'Loading Farms...',
style: Theme.of(context).textTheme.bodyLarge!.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 16),
],
),
);
} else if (failed) {
mainWidget = Center(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.error_outline,
size: 64,
color: Theme.of(context).colorScheme.error,
),
const SizedBox(height: 16),
Text(
'Failed to load farms',
style: Theme.of(context).textTheme.titleLarge!.copyWith(
color: Theme.of(context).colorScheme.onSurface,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 8),
Text(
'Please check your connection and try again',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 32),
ElevatedButton.icon(
icon: const Icon(Icons.refresh),
label: const Text('Try Again'),
onPressed: () {
listFarms();
},
),
],
),
),
);
} else {
mainWidget = Column(
children: [
Expand Down
3 changes: 3 additions & 0 deletions app/lib/screens/home_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,8 +206,11 @@ class _HomeScreenState extends ConsumerState<HomeScreen>
Widget build(BuildContext context) {
ProviderScope.containerOf(context, listen: false)
.read(walletsNotifier.notifier);
final colorScheme = Theme.of(context).colorScheme;

return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: colorScheme.surfaceContainerHighest,
appBar: PreferredSize(
preferredSize: const Size.fromHeight(0),
child: AppBar(
Expand Down
26 changes: 16 additions & 10 deletions app/lib/screens/market/overview.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,11 +410,15 @@ class _OverviewWidgetState extends ConsumerState<OverviewWidget> {
child: Column(
children: [
Card(
margin: const EdgeInsets.symmetric(horizontal: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
borderRadius: BorderRadius.circular(12),
side: BorderSide(
color: Theme.of(context).colorScheme.primary),
color: Theme.of(context).colorScheme.outline.withOpacity(0.5),
width: 1,
),
),
elevation: 0,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
Expand All @@ -426,10 +430,10 @@ class _OverviewWidgetState extends ConsumerState<OverviewWidget> {
.textTheme
.titleLarge!
.copyWith(
fontWeight: FontWeight.bold,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.colorScheme
.onSecondaryContainer),
.onSurface),
),
Row(
crossAxisAlignment:
Expand Down Expand Up @@ -471,13 +475,15 @@ class _OverviewWidgetState extends ConsumerState<OverviewWidget> {
SizedBox(
width: double.infinity,
child: Card(
margin: const EdgeInsets.symmetric(horizontal: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
borderRadius: BorderRadius.circular(12),
side: BorderSide(
color: Theme.of(context)
.colorScheme
.primary),
color: Theme.of(context).colorScheme.outline.withOpacity(0.5),
width: 1,
),
),
elevation: 0,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
Expand All @@ -490,10 +496,10 @@ class _OverviewWidgetState extends ConsumerState<OverviewWidget> {
.textTheme
.titleLarge!
.copyWith(
fontWeight: FontWeight.bold,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.colorScheme
.onSecondaryContainer),
.onSurface),
),
Column(
crossAxisAlignment:
Expand Down
37 changes: 35 additions & 2 deletions app/lib/screens/preference_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,18 @@ class _PreferenceScreenState extends ConsumerState<PreferenceScreen> {
return LayoutDrawer(
titleText: 'Settings',
content: ListView(
padding: const EdgeInsets.symmetric(vertical: 8),
children: <Widget>[
const ListTile(
title: Text('Global settings'),
Padding(
padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
child: Text(
'Global settings',
style: Theme.of(context).textTheme.titleSmall!.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
fontWeight: FontWeight.w600,
letterSpacing: 0.5,
),
),
),
FutureBuilder(
future: checkBiometrics(),
Expand Down Expand Up @@ -212,6 +221,18 @@ class _PreferenceScreenState extends ConsumerState<PreferenceScreen> {
),
),
),
const Divider(height: 1),
Padding(
padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
child: Text(
'About',
style: Theme.of(context).textTheme.titleSmall!.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
fontWeight: FontWeight.w600,
letterSpacing: 0.5,
),
),
),
ListTile(
leading: const Icon(Icons.perm_device_information),
title: Text('Version: $version - $buildNumber'),
Expand All @@ -224,6 +245,18 @@ class _PreferenceScreenState extends ConsumerState<PreferenceScreen> {
title: const Text('Terms and conditions'),
onTap: () async => {await _showTermsAndConds()},
),
const Divider(height: 1),
Padding(
padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
child: Text(
'Account',
style: Theme.of(context).textTheme.titleSmall!.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
fontWeight: FontWeight.w600,
letterSpacing: 0.5,
),
),
),
ListTile(
leading: const Icon(Icons.logout_outlined),
title: Text(
Expand Down
Loading