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
Widget build(BuildContext context) {
return ValueListenableBuilder(
valueListenable: Arcane.features.notifier,
builder: (context, enabledFeatures, _) {
return ListenableBuilder(
listenable: Arcane.features.notifier,
builder: (context, _) {
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
@@ -271,13 +271,8 @@ class ArcaneThemeExample extends StatelessWidget {
});
@override
Widget build(BuildContext context) {
return ListenableBuilder(
listenable: Arcane.theme.themeChanges,
builder: (context, _) {
final ThemeData effectiveTheme = Arcane.theme.currentTheme;
final bool isFollowingSystem = Arcane.theme.isFollowingSystemTheme;
return Card(
return ArcaneThemeSwitcher(
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
@@ -299,8 +294,7 @@ class ArcaneThemeExample extends StatelessWidget {
return const Icon(Icons.light_mode);
}),
onChanged: (_) {
final ThemeMode oldTheme =
Arcane.theme.currentThemeMode;
final ThemeMode oldTheme = Arcane.theme.currentThemeMode;
Arcane.theme.switchTheme();
Arcane.log(
"Switching theme",
@@ -317,7 +311,7 @@ class ArcaneThemeExample extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
Checkbox(
value: isFollowingSystem,
value: Arcane.theme.followingSystemThemeChanges.value,
onChanged: (value) {
final ThemeMode oldTheme =
Arcane.theme.currentThemeMode;
@@ -375,8 +369,7 @@ class ArcaneThemeExample extends StatelessWidget {
colorSchemeSeed: colors[index],
),
);
} else if (context.themeMode ==
ThemeMode.light) {
} else if (context.themeMode == ThemeMode.light) {
Arcane.theme.setLightTheme(
ThemeData(
brightness: Brightness.light,
@@ -394,16 +387,16 @@ class ArcaneThemeExample extends StatelessWidget {
"${colors[index]}-${Arcane.theme.currentThemeMode}"),
decoration: BoxDecoration(
color: colors[index],
border:
effectiveTheme.colorScheme.primary.name ==
border: Arcane.theme.currentTheme.colorScheme
.primary.name ==
colors[index].name
? Border.all(
width: 2,
color: Colors.white,
)
: null,
boxShadow:
effectiveTheme.colorScheme.primary.name ==
boxShadow: Arcane.theme.currentTheme.colorScheme
.primary.name ==
colors[index].name
? [
const BoxShadow(
@@ -433,8 +426,7 @@ class ArcaneThemeExample extends StatelessWidget {
],
),
),
);
},
),
);
}
}
@@ -31,14 +31,14 @@ class _ArcaneThemeSwitcherState extends State<ArcaneThemeSwitcher>
@override
Widget build(BuildContext context) {
return ValueListenableBuilder<ThemeMode>(
valueListenable: ArcaneReactiveTheme.I.themeModeChanges,
builder: (BuildContext context, ThemeMode themeMode, Widget? child) {
return ListenableBuilder(
listenable: ArcaneReactiveTheme.I.themeChanges,
builder: (BuildContext context, Widget? child) {
return ValueListenableBuilder<ThemeData>(
valueListenable: ArcaneReactiveTheme.I.themeDataChanges,
builder: (BuildContext context, ThemeData themeData, Widget? child) {
return _ArcaneTheme(
themeMode: themeMode,
themeMode: ArcaneReactiveTheme.I.currentThemeMode,
followSystem: ArcaneReactiveTheme.I.isFollowingSystemTheme,
theme: themeData,
child: widget.child,