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

feat: Replace theme dialog with segmented buttons (#82)

Browse source 
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
This commit is contained in:
Dr.Blank 2025-05-22 07:26:25 +05:30 • committed by GitHub
parent 23e5d73bea
commit 25c3346941
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 34 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

120
lib/settings/view/theme_settings_page.dart
View file

@ -30,48 +30,45 @@ class ThemeSettingsPage extends HookConsumerWidget {
), ),
tiles: [ tiles: [
// choose system , light or dark theme // choose system , light or dark theme
SettingsTile.navigation( SettingsTile(
title: const Text('Theme Mode'), title: const Text('Theme Mode'),
description: Text.rich( description: SegmentedButton(
TextSpan( expandedInsets: const EdgeInsets.only(top: 8.0),
text: themeSettings.themeMode == ThemeMode.system showSelectedIcon: true,
? 'Using mode from ' selectedIcon: const Icon(Icons.check),
: 'Using ', selected: {themeSettings.themeMode},
children: [ onSelectionChanged: (newSelection) {
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( ref.read(appSettingsProvider.notifier).update(
appSettings.copyWith.themeSettings( appSettings.copyWith.themeSettings(
themeMode: themeMode, themeMode: newSelection.first,
), ),
); );
} },
}, segments: [
ButtonSegment(
value: ThemeMode.light,
icon: Icon(Icons.light_mode),
label: const Text('Light'),
),
ButtonSegment(
value: ThemeMode.system,
icon: Icon(Icons.auto_awesome),
label: const Text('System'),
),
ButtonSegment(
value: ThemeMode.dark,
icon: Icon(Icons.dark_mode),
label: const Text('Dark'),
),
],
),
leading: Icon(
themeSettings.themeMode == ThemeMode.light
? Icons.light_mode
: themeSettings.themeMode == ThemeMode.dark
? Icons.dark_mode
: Icons.auto_awesome,
),
), ),
// high contrast mode // high contrast mode
@ -210,52 +207,3 @@ extension StringExtension on String {
return Color(int.parse('0xff$substring(1)')); 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);
},
),
],
);
}
}