Nexus/nexus
Nexus/nexus
4
4
Fork 5
Code Issues 14 Pull requests 2 Projects Releases Packages Wiki Activity

WIP: Add settings page #46

Draft
Henry-Hiles wants to merge 11 commits from settings-page into main
pull from: settings-page
merge into: Nexus:main
Conversation 0 Commits 11 Files changed 7 +335 -92
5 changed files with 335 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6726e544bd - Show all commits

dynamic category groups

Prev Next
Henry Hiles 2026-06-26 15:49:37 -04:00
commit 6726e544bd
Signed by: Henry-Hiles
SSH key fingerprint: SHA256:VKQUdS31Q90KvX7EkKMHMBpUspcmItAh86a+v7PGiIs

12
lib/models/setting.dart Normal file
View file

@ -0,0 +1,12 @@
import "package:flutter/material.dart";
import "package:freezed_annotation/freezed_annotation.dart";
part "setting.freezed.dart";
@freezed
abstract class Setting with _$Setting {
const factory Setting({
required String title,
required String description,
required Widget widget,
}) = _Setting;
}

14
lib/models/settings_category.dart Normal file
View file

@ -0,0 +1,14 @@
import "package:fast_immutable_collections/fast_immutable_collections.dart";
import "package:flutter/material.dart";
import "package:freezed_annotation/freezed_annotation.dart";
import "package:nexus/models/setting.dart";
part "settings_category.freezed.dart";
@freezed
abstract class SettingsCategory with _$SettingsCategory {
const factory SettingsCategory({
required String title,
required IconData icon,
required IList<Setting> settings,
}) = _SettingsCategory;
}

281
lib/pages/settings_page.dart
View file

@ -1,100 +1,197 @@
import "package:collection/collection.dart";
import "package:fast_immutable_collections/fast_immutable_collections.dart";
import "package:flutter/material.dart"; import "package:flutter/material.dart";
import "package:flutter_riverpod/flutter_riverpod.dart"; import "package:flutter_hooks/flutter_hooks.dart";
import "package:hooks_riverpod/hooks_riverpod.dart";
import "package:intl/intl.dart";
import "package:m3e_card_list/m3e_card_list.dart"; import "package:m3e_card_list/m3e_card_list.dart";
import "package:navigation_rail_m3e/navigation_rail_m3e.dart"; import "package:navigation_rail_m3e/navigation_rail_m3e.dart";
import "package:nexus/models/settings_category.dart";
import "package:nexus/widgets/divider_text.dart"; import "package:nexus/widgets/divider_text.dart";
import "package:nexus/widgets/settings/dialog_list_tile.dart";
import "package:super_sliver_list/super_sliver_list.dart"; import "package:super_sliver_list/super_sliver_list.dart";
class SettingsPage extends ConsumerWidget { class SettingsPage extends ConsumerWidget {
const SettingsPage({super.key}); const SettingsPage({super.key});
static final IMap<String, IList<SettingsCategory>>
settingsCategoryGroups = .new({
"General": .new([
.new(
title: "Appearance",
icon: Icons.brush,
settings: .new([
.new(
title: "Dark Mode",
description:
"Toggle between Light Mode, Dark Mode, and System themes.",
widget: DialogListTile<ThemeMode>(
icon: Icon(Icons.palette),
title: "Dark Mode",
initialValue: ThemeMode.system,
options: ThemeMode.values,
getName: (option) => toBeginningOfSentenceCase(option.name),
onChanged: (value) {},
),
),
.new(
title: "Use Client Side Decorations",
description:
"On desktop, toggle between client-side or server-side decorations",
widget: SwitchListTile(
title: Text("Client Side Decorations"),
value: true,
onChanged: (value) {},
),
),
]),
),
.new(
title: "Appearance",
icon: Icons.brush,
settings: .new([
.new(
title: "Dark Mode",
description:
"Toggle between Light Mode, Dark Mode, and System themes.",
widget: DialogListTile<ThemeMode>(
icon: Icon(Icons.palette),
title: "Dark Mode",
initialValue: ThemeMode.system,
options: ThemeMode.values,
getName: (option) => toBeginningOfSentenceCase(option.name),
onChanged: (value) {},
),
),
.new(
title: "Use Client Side Decorations",
description:
"On desktop, toggle between client-side or server-side decorations",
widget: SwitchListTile(
title: Text("Client Side Decorations"),
value: true,
onChanged: (value) {},
),
),
]),
),
.new(
title: "Appearance",
icon: Icons.brush,
settings: .new([
.new(
title: "Dark Mode",
description:
"Toggle between Light Mode, Dark Mode, and System themes.",
widget: DialogListTile<ThemeMode>(
icon: Icon(Icons.palette),
title: "Dark Mode",
initialValue: ThemeMode.system,
options: ThemeMode.values,
getName: (option) => toBeginningOfSentenceCase(option.name),
onChanged: (value) {},
),
),
.new(
title: "Use Client Side Decorations",
description:
"On desktop, toggle between client-side or server-side decorations",
widget: SwitchListTile(
title: Text("Client Side Decorations"),
value: true,
onChanged: (value) {},
),
),
]),
),
]),
});
@override @override
Widget build(BuildContext context, WidgetRef ref) => LayoutBuilder( Widget build(BuildContext context, WidgetRef ref) => LayoutBuilder(
builder: (context, constraints) { builder: (_, constraints) => HookBuilder(
final categoriesArePages = constraints.maxWidth < 550; builder: (context) {
final categoriesArePages = constraints.maxWidth < 550;
final settingsContent = Scaffold( final selected = useState(0);
appBar: AppBar(
title: Text("Settings"), final settingsContent = Scaffold(
actionsPadding: .symmetric(horizontal: 12), appBar: AppBar(
actions: [ title: Text("Settings"),
SearchAnchor( actionsPadding: .symmetric(horizontal: 12),
builder: (_, controller) => IconButton( actions: [
icon: const Icon(Icons.search), SearchAnchor(
onPressed: controller.openView, builder: (_, controller) => IconButton(
icon: const Icon(Icons.search),
onPressed: controller.openView,
),
suggestionsBuilder: (context, controller) {
// TODO
return [];
},
), ),
suggestionsBuilder: (context, controller) { ],
return []; ),
}, body: categoriesArePages
),
],
),
body: Padding(
padding: .symmetric(vertical: 12),
child: categoriesArePages
? CustomScrollView( ? CustomScrollView(
slivers: [ slivers: settingsCategoryGroups
SliverToBoxAdapter( .mapTo(
child: Padding( (categoryGroup, categories) => [
padding: .symmetric(horizontal: 16), SliverToBoxAdapter(
child: DividerText("Account Settings"), child: Padding(
), padding: .symmetric(horizontal: 16),
), child: DividerText(categoryGroup),
SliverM3ECardList( ),
padding: .symmetric(horizontal: 4, vertical: 8), ),
margin: .all(12), SliverM3ECardList(
color: Theme.of(context).colorScheme.primaryContainer, padding: .symmetric(horizontal: 4, vertical: 8),
itemCount: 3, margin: .all(12),
itemBuilder: (context, index) => ListTile( color: Theme.of(
leading: Icon(Icons.abc), context,
title: Text("Account"), ).colorScheme.primaryContainer,
), itemCount: categories.length,
), onTap: (index) => Navigator.of(context).push(
SliverToBoxAdapter( MaterialPageRoute(
child: Padding( builder: (context) => Scaffold(
padding: .symmetric(horizontal: 16), appBar: AppBar(
child: DividerText("Some Other Settings"), title: Text(categories[index].title),
), ),
), body: ListView(),
SliverM3ECardList( ),
padding: .symmetric(horizontal: 4, vertical: 8), ),
margin: .symmetric(horizontal: 12), ),
color: Theme.of(context).colorScheme.primaryContainer, itemBuilder: (context, index) => ListTile(
itemCount: 4, leading: Icon(categories[index].icon),
itemBuilder: (context, index) => ListTile( title: Text(categories[index].title),
leading: Icon(Icons.abc), ),
title: Text("Account"), ),
), ],
), )
], .flattenedToList,
) )
: Row( : Row(
children: [ children: [
Padding( NavigationRailM3E(
padding: .symmetric(vertical: 8), type: .alwaysExpand,
child: NavigationRailM3E( sections: settingsCategoryGroups
type: .alwaysExpand, .mapTo(
sections: [ (categoryGroup, categories) =>
.new( NavigationRailM3ESection(
header: DividerText("Account Settings"), header: DividerText(categoryGroup),
destinations: [ destinations: categories
.new(icon: Icon(Icons.abc), label: "Account"), .map(
.new(icon: Icon(Icons.abc), label: "Account"), (category) =>
.new(icon: Icon(Icons.abc), label: "Account"), NavigationRailM3EDestination(
], icon: Icon(category.icon),
), label: category.title,
.new( ),
header: DividerText("Some Other Settings"), )
destinations: [ .toList(),
.new(icon: Icon(Icons.abc), label: "Account"), ),
.new(icon: Icon(Icons.abc), label: "Account"), )
.new(icon: Icon(Icons.abc), label: "Account"), .toList(),
], selectedIndex: selected.value,
), onDestinationSelected: (value) => selected.value = value,
],
selectedIndex: 0,
onDestinationSelected: (value) {},
),
), ),
VerticalDivider(), VerticalDivider(),
Expanded( Expanded(
@ -130,18 +227,18 @@ class SettingsPage extends ConsumerWidget {
), ),
], ],
), ),
), );
);
return constraints.maxWidth < 650 return constraints.maxWidth < 650
? settingsContent ? settingsContent
: Dialog( : Dialog(
constraints: .loose(Size(900, 600)), constraints: .loose(Size(900, 600)),
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadiusGeometry.circular(12), borderRadius: BorderRadiusGeometry.circular(12),
child: settingsContent, child: settingsContent,
), ),
); );
}, },
),
); );
} }

65
lib/widgets/settings/dialog_list_tile.dart Normal file
View file

@ -0,0 +1,65 @@
import "package:flutter/material.dart";
import "package:flutter_riverpod/flutter_riverpod.dart";
import "package:nexus/widgets/settings/radio_dialog.dart";
class DialogListTile<T> extends ConsumerWidget {
final T? initialValue;
final String title;
final String? description;
final List<T> options;
final bool required;
final Icon icon;
final void Function(T value)? onChanged;
final String Function(T option) getName;
const DialogListTile({
super.key,
required this.icon,
required this.title,
required this.initialValue,
required this.options,
required this.onChanged,
required this.getName,
this.description,
this.required = true,
});
@override
Widget build(BuildContext context, WidgetRef ref) => FormField(
validator: (value) =>
value == null && required == true ? "This field is required." : null,
initialValue: initialValue,
builder: (field) => InputDecorator(
decoration: InputDecoration(
errorText: field.errorText,
contentPadding: EdgeInsets.zero,
enabledBorder: InputBorder.none,
),
child: ListTile(
onTap: () => showDialog(
context: context,
builder: (context) => RadioDialog<T>(
title: title,
getName: getName,
onChanged: onChanged == null
? null
: (value) {
field.didChange(value);
onChanged!.call(value);
},
value: field.value,
options: options,
),
),
title: Text(title),
subtitle: description == null ? null : Text(description!),
leading: icon,
trailing: Chip(
label: Text(
field.value == null ? "None" : getName(field.value as T),
overflow: TextOverflow.ellipsis,
),
),
),
),
);
}

55
lib/widgets/settings/radio_dialog.dart Normal file
View file

@ -0,0 +1,55 @@
import "package:flutter/material.dart";
import "package:flutter_hooks/flutter_hooks.dart";
class RadioDialog<T> extends HookWidget {
final T? value;
final String title;
final List<T> options;
final void Function(T value)? onChanged;
final String Function(T option) getName;
const RadioDialog({
super.key,
required this.title,
required this.value,
required this.options,
required this.onChanged,
required this.getName,
});
@override
Widget build(BuildContext context) {
final mutValue = useState<T?>(null);
return AlertDialog(
title: Text(title),
content: RadioGroup<T>(
groupValue: mutValue.value ?? value,
onChanged: (value) => mutValue.value = value ?? mutValue.value,
child: Column(
mainAxisSize: MainAxisSize.min,
children: options
.map(
(option) => RadioListTile<T>(
enabled: onChanged != null,
value: option,
title: Text(getName(option)),
dense: true,
),
)
.toList(),
),
),
actions: [
TextButton(onPressed: Navigator.of(context).pop, child: Text("Cancel")),
if (onChanged != null)
TextButton(
onPressed: () {
if (mutValue.value != null) onChanged!(mutValue.value as T);
Navigator.of(context).pop();
},
child: Text("OK"),
),
],
);
}
}