Moved theme selector into dialog

FIXES: Bug where text would wrap
after a couple of characters on mobile,
because flutter keeps the SegmentedButton at full width
This commit is contained in:
Jakob Meier 2023-03-25 15:24:12 +01:00
parent 30a19fcc1e
commit 67a5130ac0
No known key found for this signature in database
GPG key ID: 66BDC7E6A01A6152

View file

@ -112,23 +112,50 @@ class _SettingsPageState extends State<SettingsPage> {
title: const Text('Change Theme'),
subtitle: const Text(
'You can change between a light theme, a dark theme and automatic theme selection'),
// NOTE: have the trailing item be a value select widget
trailing: SegmentedButton<AppTheme>(
selected: {context.watch<AppTheme>()},
selectedIcon: Icon(context.watch<AppTheme>().icon),
showSelectedIcon: true,
multiSelectionEnabled: false,
emptySelectionAllowed: false,
segments: AppTheme.list().map((item) {
return ButtonSegment<AppTheme>(
value: item, icon: Icon(item.icon), label: Text(item.name));
}).toList(),
onSelectionChanged: (item) async {
try {
await item.first.toDisk();
} catch(_) {}
},
),
trailing: const Icon(Icons.chevron_right),
onTap: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('Change Theme'),
content: SingleChildScrollView(
child: Column(
children: [
const Padding(
padding: EdgeInsets.all(8),
child: Text('Choose your preferred theme'),
),
SegmentedButton<AppTheme>(
selected: {context.watch<AppTheme>()},
selectedIcon: Icon(context.watch<AppTheme>().icon),
showSelectedIcon: true,
multiSelectionEnabled: false,
emptySelectionAllowed: false,
segments: AppTheme.list().map((item) {
return ButtonSegment<AppTheme>(
value: item,
icon: Icon(item.icon),
label: Text(item.name));
}).toList(),
onSelectionChanged: (item) async {
try {
await item.first.toDisk();
} catch (_) {}
},
),
]
)
),
actions: [
FilledButton(
child: const Text('Close'),
onPressed: () {
Navigator.of(context).pop();
},
)
],
));
},
),
// change password button
@ -136,10 +163,6 @@ class _SettingsPageState extends State<SettingsPage> {
title: const Text('Change password'),
subtitle: const Text('Choose a new password for your account'),
onTap: () {
// TODO: show confirm dialog
// NOTE: needs an input field for the current password
// NOTE: might want to show a message explaining,
// that there is no way to reset the password
showDialog(
context: context,
builder: (context) => const ChangePasswordDialog());