groove/Vaani
1
0
Fork 0
mirror of https://github.com/Dr-Blank/Vaani.git synced 2025-12-26 21:09:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: multiple theming options (#50)

Browse source 
* refactor: consolidate theme definitions by removing separate dark and light theme files

* feat: integrate dynamic color support and enhance theme settings management

* feat: add theme settings route and update theme management in app settings

* feat: enhance theme management by integrating high contrast support in various components

* feat: implement mode selection dialog for theme settings and enhance button functionality

* refactor: update theme import paths and consolidate theme provider files

* feat: enhance theme management by integrating theme selection based on audiobook playback

* refactor: update default value for useMaterialThemeFromSystem to false in theme settings

* refactor: adjust high contrast condition order in theme settings for consistency

* refactor: rename useMaterialThemeOfPlayingItem to useCurrentPlayerThemeThroughoutApp for clarity

* refactor: correct spelling in system theme provider and replace with updated implementation

* refactor: extract restore backup dialog into a separate widget for improved readability

* refactor: reorganize settings sections for clarity and improve restore dialog functionality
This commit is contained in:
Dr.Blank 2024-10-05 10:01:08 -04:00 • committed by GitHub
parent 758e4cdc83
commit ff83c2cc63
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
28 changed files with 935 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

247
lib/settings/view/app_settings_page.dart
View file

@ -7,11 +7,10 @@ import 'package:flutter_settings_ui/flutter_settings_ui.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:vaani/api/authenticated_user_provider.dart';
import 'package:vaani/api/server_provider.dart';
import 'package:vaani/router/router.dart';
import 'package:vaani/settings/app_settings_provider.dart';
import 'package:vaani/settings/models/app_settings.dart' as model;
import 'package:vaani/settings/view/buttons.dart';
import 'package:vaani/settings/view/simple_settings_page.dart';
import 'package:vaani/settings/view/widgets/navigation_with_switch_tile.dart';
@ -23,58 +22,11 @@ class AppSettingsPage extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final appSettings = ref.watch(appSettingsProvider);
final registeredServers = ref.watch(audiobookShelfServerProvider);
final registeredServersAsList = registeredServers.toList();
final availableUsers = ref.watch(authenticatedUserProvider);
final serverURIController = useTextEditingController();
final sleepTimerSettings = appSettings.sleepTimerSettings;
return SimpleSettingsPage(
title: const Text('App Settings'),
sections: [
// Appearance section
SettingsSection(
margin: const EdgeInsetsDirectional.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
title: Text(
'Appearance',
style: Theme.of(context).textTheme.titleLarge,
),
tiles: [
SettingsTile.switchTile(
initialValue: appSettings.themeSettings.isDarkMode,
title: const Text('Dark Mode'),
description: const Text('we all know dark mode is better'),
leading: appSettings.themeSettings.isDarkMode
? const Icon(Icons.dark_mode)
: const Icon(Icons.light_mode),
onToggle: (value) {
ref.read(appSettingsProvider.notifier).toggleDarkMode();
},
),
SettingsTile.switchTile(
initialValue:
appSettings.themeSettings.useMaterialThemeOnItemPage,
title: const Text('Adaptive Theme on Item Page'),
description: const Text(
'get fancy with the colors on the item page at the cost of some performance',
),
leading: appSettings.themeSettings.useMaterialThemeOnItemPage
? const Icon(Icons.auto_fix_high)
: const Icon(Icons.auto_fix_off),
onToggle: (value) {
ref.read(appSettingsProvider.notifier).update(
appSettings.copyWith.themeSettings(
useMaterialThemeOnItemPage: value,
),
);
},
),
],
),
// General section
SettingsSection(
margin: const EdgeInsetsDirectional.symmetric(
@ -86,6 +38,16 @@ class AppSettingsPage extends HookConsumerWidget {
style: Theme.of(context).textTheme.titleLarge,
),
tiles: [
SettingsTile(
title: const Text('Player Settings'),
leading: const Icon(Icons.play_arrow),
description: const Text(
'Customize the player settings',
),
onPressed: (context) {
context.pushNamed(Routes.playerSettings.name);
},
),
NavigationWithSwitchTile(
title: const Text('Auto Turn On Sleep Timer'),
description: const Text(
@ -106,26 +68,6 @@ class AppSettingsPage extends HookConsumerWidget {
);
},
),
SettingsTile(
title: const Text('Notification Media Player'),
leading: const Icon(Icons.play_lesson),
description: const Text(
'Customize the media player in notifications',
),
onPressed: (context) {
context.pushNamed(Routes.notificationSettings.name);
},
),
SettingsTile(
title: const Text('Player Settings'),
leading: const Icon(Icons.play_arrow),
description: const Text(
'Customize the player settings',
),
onPressed: (context) {
context.pushNamed(Routes.playerSettings.name);
},
),
NavigationWithSwitchTile(
title: const Text('Shake Detector'),
leading: const Icon(Icons.vibration),
@ -146,6 +88,41 @@ class AppSettingsPage extends HookConsumerWidget {
),
],
),
// Appearance section
SettingsSection(
margin: const EdgeInsetsDirectional.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
title: Text(
'Appearance',
style: Theme.of(context).textTheme.titleLarge,
),
tiles: [
SettingsTile.navigation(
leading: const Icon(Icons.color_lens),
title: const Text('Theme Settings'),
description: const Text(
'Customize the app theme',
),
onPressed: (context) {
context.pushNamed(Routes.themeSettings.name);
},
),
SettingsTile(
title: const Text('Notification Media Player'),
leading: const Icon(Icons.play_lesson),
description: const Text(
'Customize the media player in notifications',
),
onPressed: (context) {
context.pushNamed(Routes.notificationSettings.name);
},
),
],
),
// Backup and Restore section
SettingsSection(
margin: const EdgeInsetsDirectional.symmetric(
@ -185,61 +162,11 @@ class AppSettingsPage extends HookConsumerWidget {
'Restore the app settings from the backup',
),
onPressed: (context) {
final formKey = GlobalKey<FormState>();
// show a dialog to get the backup
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('Restore Backup'),
content: Form(
key: formKey,
child: TextFormField(
controller: serverURIController,
decoration: const InputDecoration(
labelText: 'Backup',
hintText: 'Paste the backup here',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please paste the backup here';
}
return null;
},
),
),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('Cancel'),
),
TextButton(
onPressed: () {
if (formKey.currentState!.validate()) {
final backup = serverURIController.text;
final newSettings = model.AppSettings.fromJson(
// decode the backup as json
jsonDecode(backup),
);
ref
.read(appSettingsProvider.notifier)
.update(newSettings);
Navigator.of(context).pop();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Settings restored'),
),
);
// clear the backup
serverURIController.clear();
}
},
child: const Text('Restore'),
),
],
);
return RestoreDialogue();
},
);
},
@ -292,3 +219,83 @@ class AppSettingsPage extends HookConsumerWidget {
);
}
}
class RestoreDialogue extends HookConsumerWidget {
const RestoreDialogue({
super.key,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final formKey = useMemoized(() => GlobalKey<FormState>());
final settings = useState<model.AppSettings?>(null);
final settingsInputController = useTextEditingController();
return AlertDialog(
title: const Text('Restore Backup'),
content: Form(
key: formKey,
child: TextFormField(
autofocus: true,
decoration: InputDecoration(
labelText: 'Backup',
hintText: 'Paste the backup here',
// clear button
suffixIcon: IconButton(
icon: Icon(Icons.clear),
onPressed: () {
settingsInputController.clear();
},
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please paste the backup here';
}
try {
// try to decode the backup
settings.value = model.AppSettings.fromJson(
jsonDecode(value),
);
} catch (e) {
return 'Invalid backup';
}
return null;
},
),
),
actions: [
CancelButton(),
TextButton(
onPressed: () {
if (formKey.currentState!.validate()) {
if (settings.value == null) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Invalid backup'),
),
);
return;
}
ref.read(appSettingsProvider.notifier).update(settings.value!);
settingsInputController.clear();
Navigator.of(context).pop();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Settings restored'),
),
);
} else {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Invalid backup'),
),
);
}
},
child: const Text('Restore'),
),
],
);
}
}

4
lib/settings/view/buttons.dart
View file

@ -20,12 +20,16 @@ class OkButton<T> extends StatelessWidget {
class CancelButton extends StatelessWidget {
const CancelButton({
super.key,
this.onPressed,
});
final void Function()? onPressed;
@override
Widget build(BuildContext context) {
return TextButton(
onPressed: () {
onPressed?.call();
Navigator.of(context).pop();
},
child: const Text('Cancel'),

261
lib/settings/view/theme_settings_page.dart Normal file
View file

@ -0,0 +1,261 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_settings_ui/flutter_settings_ui.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:vaani/settings/app_settings_provider.dart';
import 'package:vaani/settings/view/buttons.dart';
import 'package:vaani/settings/view/simple_settings_page.dart';
import 'package:vaani/shared/extensions/enum.dart';
class ThemeSettingsPage extends HookConsumerWidget {
const ThemeSettingsPage({
super.key,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final appSettings = ref.watch(appSettingsProvider);
final themeSettings = appSettings.themeSettings;
final primaryColor = Theme.of(context).colorScheme.primary;
return SimpleSettingsPage(
title: const Text('Theme Settings'),
sections: [
SettingsSection(
margin: const EdgeInsetsDirectional.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
tiles: [
// choose system , light or dark theme
SettingsTile.navigation(
title: const Text('Theme Mode'),
description: Text.rich(
TextSpan(
text: themeSettings.themeMode == ThemeMode.system
? 'Using mode from '
: 'Using ',
children: [
TextSpan(
text: themeSettings.themeMode.pascalCase,
style: TextStyle(
color: primaryColor,
),
),
if (themeSettings.themeMode != ThemeMode.system)
const TextSpan(text: ' mode'),
],
),
),
leading: const Icon(Icons.color_lens),
trailing: themeSettings.themeMode == ThemeMode.system
? const Icon(Icons.auto_awesome)
: themeSettings.themeMode == ThemeMode.light
? const Icon(Icons.light_mode)
: const Icon(Icons.dark_mode),
onPressed: (context) async {
final themeMode = await showDialog<ThemeMode>(
context: context,
builder: (context) {
return ModeSelectionDialog(
themeMode: themeSettings.themeMode,
);
},
);
if (themeMode != null) {
ref.read(appSettingsProvider.notifier).update(
appSettings.copyWith.themeSettings(
themeMode: themeMode,
),
);
}
},
),
// high contrast mode
SettingsTile.switchTile(
leading: themeSettings.highContrast
? const Icon(Icons.accessibility)
: const Icon(Icons.accessibility_new_outlined),
initialValue: themeSettings.highContrast,
title: const Text('High Contrast Mode'),
description: const Text(
'Increase the contrast between the background and the text',
),
onToggle: (value) {
ref.read(appSettingsProvider.notifier).update(
appSettings.copyWith.themeSettings(
highContrast: value,
),
);
},
),
// use material theme from system
SettingsTile.switchTile(
initialValue: themeSettings.useMaterialThemeFromSystem,
title: Platform.isAndroid
? const Text('Use Material You')
: const Text('Material Theme from System'),
description: const Text(
'Use the system theme colors for the app',
),
leading: themeSettings.useMaterialThemeFromSystem
? const Icon(Icons.auto_awesome)
: const Icon(Icons.auto_fix_off),
onToggle: (value) {
ref.read(appSettingsProvider.notifier).update(
appSettings.copyWith.themeSettings(
useMaterialThemeFromSystem: value,
),
);
},
),
// TODO choose the primary color
// SettingsTile.navigation(
// title: const Text('Primary Color'),
// description: const Text(
// 'Choose the primary color for the app',
// ),
// leading: const Icon(Icons.colorize),
// trailing: Icon(
// Icons.circle,
// color: themeSettings.customThemeColor.toColor(),
// ),
// onPressed: (context) async {
// final selectedColor = await showDialog<Color>(
// context: context,
// builder: (context) {
// return SimpleDialog(
// title: const Text('Select Primary Color'),
// children: [
// for (final color in Colors.primaries)
// SimpleDialogOption(
// onPressed: () {
// Navigator.pop(context, color);
// },
// child: Container(
// color: color,
// height: 48,
// ),
// ),
// ],
// );
// },
// );
// if (selectedColor != null) {
// ref.read(appSettingsProvider.notifier).update(
// appSettings.copyWith.themeSettings(
// customThemeColor: selectedColor.toHexString(),
// ),
// );
// }
// },
// ),
// use theme throughout the app when playing item
SettingsTile.switchTile(
initialValue: themeSettings.useCurrentPlayerThemeThroughoutApp,
title: const Text('Adapt theme from currently playing item'),
description: const Text(
'Use the theme colors from the currently playing item for the app',
),
leading: themeSettings.useCurrentPlayerThemeThroughoutApp
? const Icon(Icons.auto_fix_high)
: const Icon(Icons.auto_fix_off),
onToggle: (value) {
ref.read(appSettingsProvider.notifier).update(
appSettings.copyWith.themeSettings(
useCurrentPlayerThemeThroughoutApp: value,
),
);
},
),
SettingsTile.switchTile(
initialValue: themeSettings.useMaterialThemeOnItemPage,
title: const Text('Adaptive Theme on Item Page'),
description: const Text(
'get fancy with the colors on the item page at the cost of some performance',
),
leading: themeSettings.useMaterialThemeOnItemPage
? const Icon(Icons.auto_fix_high)
: const Icon(Icons.auto_fix_off),
onToggle: (value) {
ref.read(appSettingsProvider.notifier).update(
appSettings.copyWith.themeSettings(
useMaterialThemeOnItemPage: value,
),
);
},
),
],
),
],
);
}
}
extension ColorExtension on Color {
String toHexString() {
return '#${value.toRadixString(16).substring(2)}';
}
}
extension StringExtension on String {
Color toColor() {
return Color(int.parse('0xff$substring(1)'));
}
}
class ModeSelectionDialog extends HookConsumerWidget {
final ThemeMode themeMode;
const ModeSelectionDialog({
super.key,
required this.themeMode,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final selectedTheme = useState(themeMode);
// a wrap of chips to show the available modes with icons
return AlertDialog(
title: const Text('Select Theme Mode'),
content: Wrap(
spacing: 8.0,
runSpacing: 8.0,
children: ThemeMode.values
.map(
(mode) => ChoiceChip(
avatar: switch (mode) {
ThemeMode.system => const Icon(Icons.auto_awesome),
ThemeMode.light => const Icon(Icons.light_mode),
ThemeMode.dark => const Icon(Icons.dark_mode),
},
showCheckmark: false,
label: Text(mode.pascalCase),
selected: mode == selectedTheme.value,
onSelected: (selected) {
if (selected) {
selectedTheme.value = mode;
}
},
),
)
.toList(),
),
actions: [
CancelButton(),
OkButton(
onPressed: () {
Navigator.pop(context, selectedTheme.value);
},
),
],
);
}
}