Refactor theme management to use ListenableBuilder for improved reactivity

Signed-off-by: Hans Kokx <hans.d.kokx@gmail.com>
This commit is contained in:
2025-07-01 17:31:42 +02:00
parent 707a4c7956
commit c82c1822cc
2 changed files with 156 additions and 164 deletions
+13 -21
View File
@@ -210,9 +210,9 @@ class ArcaneAuthExample extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ValueListenableBuilder( return ListenableBuilder(
valueListenable: Arcane.features.notifier, listenable: Arcane.features.notifier,
builder: (context, enabledFeatures, _) { builder: (context, _) {
return Card( return Card(
child: Padding( child: Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
@@ -271,13 +271,8 @@ class ArcaneThemeExample extends StatelessWidget {
}); });
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ListenableBuilder( return ArcaneThemeSwitcher(
listenable: Arcane.theme.themeChanges, child: Card(
builder: (context, _) {
final ThemeData effectiveTheme = Arcane.theme.currentTheme;
final bool isFollowingSystem = Arcane.theme.isFollowingSystemTheme;
return Card(
child: Padding( child: Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
child: Column( child: Column(
@@ -299,8 +294,7 @@ class ArcaneThemeExample extends StatelessWidget {
return const Icon(Icons.light_mode); return const Icon(Icons.light_mode);
}), }),
onChanged: (_) { onChanged: (_) {
final ThemeMode oldTheme = final ThemeMode oldTheme = Arcane.theme.currentThemeMode;
Arcane.theme.currentThemeMode;
Arcane.theme.switchTheme(); Arcane.theme.switchTheme();
Arcane.log( Arcane.log(
"Switching theme", "Switching theme",
@@ -317,7 +311,7 @@ class ArcaneThemeExample extends StatelessWidget {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Checkbox( Checkbox(
value: isFollowingSystem, value: Arcane.theme.followingSystemThemeChanges.value,
onChanged: (value) { onChanged: (value) {
final ThemeMode oldTheme = final ThemeMode oldTheme =
Arcane.theme.currentThemeMode; Arcane.theme.currentThemeMode;
@@ -375,8 +369,7 @@ class ArcaneThemeExample extends StatelessWidget {
colorSchemeSeed: colors[index], colorSchemeSeed: colors[index],
), ),
); );
} else if (context.themeMode == } else if (context.themeMode == ThemeMode.light) {
ThemeMode.light) {
Arcane.theme.setLightTheme( Arcane.theme.setLightTheme(
ThemeData( ThemeData(
brightness: Brightness.light, brightness: Brightness.light,
@@ -394,16 +387,16 @@ class ArcaneThemeExample extends StatelessWidget {
"${colors[index]}-${Arcane.theme.currentThemeMode}"), "${colors[index]}-${Arcane.theme.currentThemeMode}"),
decoration: BoxDecoration( decoration: BoxDecoration(
color: colors[index], color: colors[index],
border: border: Arcane.theme.currentTheme.colorScheme
effectiveTheme.colorScheme.primary.name == .primary.name ==
colors[index].name colors[index].name
? Border.all( ? Border.all(
width: 2, width: 2,
color: Colors.white, color: Colors.white,
) )
: null, : null,
boxShadow: boxShadow: Arcane.theme.currentTheme.colorScheme
effectiveTheme.colorScheme.primary.name == .primary.name ==
colors[index].name colors[index].name
? [ ? [
const BoxShadow( const BoxShadow(
@@ -433,8 +426,7 @@ class ArcaneThemeExample extends StatelessWidget {
], ],
), ),
), ),
); ),
},
); );
} }
} }
@@ -31,14 +31,14 @@ class _ArcaneThemeSwitcherState extends State<ArcaneThemeSwitcher>
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ValueListenableBuilder<ThemeMode>( return ListenableBuilder(
valueListenable: ArcaneReactiveTheme.I.themeModeChanges, listenable: ArcaneReactiveTheme.I.themeChanges,
builder: (BuildContext context, ThemeMode themeMode, Widget? child) { builder: (BuildContext context, Widget? child) {
return ValueListenableBuilder<ThemeData>( return ValueListenableBuilder<ThemeData>(
valueListenable: ArcaneReactiveTheme.I.themeDataChanges, valueListenable: ArcaneReactiveTheme.I.themeDataChanges,
builder: (BuildContext context, ThemeData themeData, Widget? child) { builder: (BuildContext context, ThemeData themeData, Widget? child) {
return _ArcaneTheme( return _ArcaneTheme(
themeMode: themeMode, themeMode: ArcaneReactiveTheme.I.currentThemeMode,
followSystem: ArcaneReactiveTheme.I.isFollowingSystemTheme, followSystem: ArcaneReactiveTheme.I.isFollowingSystemTheme,
theme: themeData, theme: themeData,
child: widget.child, child: widget.child,