groove/Vaani
1
0
Fork 0
mirror of https://github.com/Dr-Blank/Vaani.git synced 2026-07-06 17:31:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Dr-Blank 2024-10-05 07:32:34 -04:00
parent 07780ada4e
commit 10f257aa46
No known key found for this signature in database
GPG key ID: 7452CC63F210A266
3 changed files with 58 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.vscode/settings.json vendored
View file

@ -12,6 +12,7 @@
"audioplayers",
"autolabeler",
"Autovalidate",
"Checkmark",
"deeplinking",
"fullscreen",
"Lerp",

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'),

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

@ -1,9 +1,11 @@
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';
@ -57,28 +59,8 @@ class ThemeSettingsPage extends HookConsumerWidget {
final themeMode = await showDialog<ThemeMode>(
context: context,
builder: (context) {
return SimpleDialog(
title: const Text('Select Theme Mode'),
children: [
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, ThemeMode.system);
},
child: const Text('System'),
),
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, ThemeMode.light);
},
child: const Text('Light'),
),
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, ThemeMode.dark);
},
child: const Text('Dark'),
),
],
return ModeSelectionDialog(
themeMode: themeSettings.themeMode,
);
},
);
@ -228,3 +210,52 @@ extension StringExtension on String {
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);
},
),
],
);
}
}