groove/Vaani
1
0
Fork 0
mirror of https://github.com/Dr-Blank/Vaani.git synced 2026-02-10 11:29:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Replace theme dialog with segmented buttons

Browse source 
Replaces the dialog pop-up for theme selection (Light, Dark, System)
with `SegmentedButton` widgets in the theme settings page.

The new UI uses:
- Light theme option on the left.
- System theme option in the middle.
- Dark theme option on the right.
- A checkmark icon (`Icons.check`) for the selected theme.
- Respective icons (`Icons.light_mode`, `Icons.auto_awesome`, `Icons.dark_mode`)
  for unselected themes.

The `ModeSelectionDialog` has been removed as it's no longer necessary.

Note: Full UI and persistence testing could not be completed due to
sandbox limitations where the Flutter SDK was not available.
The core code implementation was verified.
This commit is contained in:
google-labs-jules[bot] 2025-05-22 01:21:38 +00:00
parent 23e5d73bea
commit dc0540467f
1 changed files with 83 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -30,48 +30,47 @@ class ThemeSettingsPage extends HookConsumerWidget {
), ),
tiles: [ tiles: [
// choose system , light or dark theme // choose system , light or dark theme
SettingsTile.navigation( Padding(
title: const Text('Theme Mode'), padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
description: Text.rich( child: SegmentedButton<ThemeMode>(
TextSpan( segments: [
text: themeSettings.themeMode == ThemeMode.system ButtonSegment<ThemeMode>(
? 'Using mode from ' value: ThemeMode.light,
: 'Using ', icon: Icon(
children: [ themeSettings.themeMode == ThemeMode.light
TextSpan( ? Icons.check
text: themeSettings.themeMode.pascalCase, : Icons.light_mode,
style: TextStyle(
color: primaryColor,
),
), ),
if (themeSettings.themeMode != ThemeMode.system) label: const Text('Light'),
const TextSpan(text: ' mode'), ),
], ButtonSegment<ThemeMode>(
), value: ThemeMode.system,
), icon: Icon(
leading: const Icon(Icons.color_lens), themeSettings.themeMode == ThemeMode.system
trailing: themeSettings.themeMode == ThemeMode.system ? Icons.check
? const Icon(Icons.auto_awesome) : Icons.auto_awesome,
: themeSettings.themeMode == ThemeMode.light ),
? const Icon(Icons.light_mode) label: const Text('System'),
: const Icon(Icons.dark_mode), ),
onPressed: (context) async { ButtonSegment<ThemeMode>(
final themeMode = await showDialog<ThemeMode>( value: ThemeMode.dark,
context: context, icon: Icon(
builder: (context) { themeSettings.themeMode == ThemeMode.dark
return ModeSelectionDialog( ? Icons.check
themeMode: themeSettings.themeMode, : Icons.dark_mode,
); ),
}, label: const Text('Dark'),
); ),
if (themeMode != null) { ],
selected: {themeSettings.themeMode},
onSelectionChanged: (Set<ThemeMode> newSelection) {
ref.read(appSettingsProvider.notifier).update( ref.read(appSettingsProvider.notifier).update(
appSettings.copyWith.themeSettings( appSettings.copyWith.themeSettings(
themeMode: themeMode, themeMode: newSelection.first,
), ),
); );
} },
}, ),
), ),
// high contrast mode // high contrast mode
@ -210,52 +209,52 @@ extension StringExtension on String {
return Color(int.parse('0xff$substring(1)')); return Color(int.parse('0xff$substring(1)'));
} }
} }
// ModeSelectionDialog is no longer needed as SegmentedButton handles selection directly.
// class ModeSelectionDialog extends HookConsumerWidget {
// final ThemeMode themeMode;
class ModeSelectionDialog extends HookConsumerWidget { // const ModeSelectionDialog({
final ThemeMode themeMode; // super.key,
// required this.themeMode,
// });
const ModeSelectionDialog({ // @override
super.key, // Widget build(BuildContext context, WidgetRef ref) {
required this.themeMode, // final selectedTheme = useState(themeMode);
}); // // a wrap of chips to show the available modes with icons
// return AlertDialog(
@override // title: const Text('Select Theme Mode'),
Widget build(BuildContext context, WidgetRef ref) { // content: Wrap(
final selectedTheme = useState(themeMode); // spacing: 8.0,
// a wrap of chips to show the available modes with icons // runSpacing: 8.0,
return AlertDialog( // children: ThemeMode.values
title: const Text('Select Theme Mode'), // .map(
content: Wrap( // (mode) => ChoiceChip(
spacing: 8.0, // avatar: switch (mode) {
runSpacing: 8.0, // ThemeMode.system => const Icon(Icons.auto_awesome),
children: ThemeMode.values // ThemeMode.light => const Icon(Icons.light_mode),
.map( // ThemeMode.dark => const Icon(Icons.dark_mode),
(mode) => ChoiceChip( // },
avatar: switch (mode) { // showCheckmark: false,
ThemeMode.system => const Icon(Icons.auto_awesome), // label: Text(mode.pascalCase),
ThemeMode.light => const Icon(Icons.light_mode), // selected: mode == selectedTheme.value,
ThemeMode.dark => const Icon(Icons.dark_mode), // onSelected: (selected) {
}, // if (selected) {
showCheckmark: false, // selectedTheme.value = mode;
label: Text(mode.pascalCase), // }
selected: mode == selectedTheme.value, // },
onSelected: (selected) { // ),
if (selected) { // )
selectedTheme.value = mode; // .toList(),
} // ),
}, // actions: [
), // CancelButton(),
) // OkButton(
.toList(), // onPressed: () {
), // Navigator.pop(context, selectedTheme.value);
actions: [ // },
CancelButton(), // ),
OkButton( // ],
onPressed: () { // );
Navigator.pop(context, selectedTheme.value); // }
}, // }
),
],
);
}
}