animated-dark-mode-switch

lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:animated_theme_switcher/animated_theme_switcher.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:whispering_pages/api/server_provider.dart';
@@ -36,14 +37,16 @@ class MyApp extends ConsumerWidget {
       routerConfig.goNamed(Routes.onboarding.name);
     }
 
-    return MaterialApp.router(
+    return ThemeProvider(
-      debugShowCheckedModeBanner: false,
+      initTheme:
-      theme: lightTheme,
+          ref.read(appSettingsProvider).isDarkMode ? darkTheme : lightTheme,
-      darkTheme: darkTheme,
+      builder: (context, myTheme) {
-      themeMode: ref.watch(appSettingsProvider).isDarkMode
+        return MaterialApp.router(
-          ? ThemeMode.dark
+          debugShowCheckedModeBanner: false,
-          : ThemeMode.light,
+          routerConfig: routerConfig,
-      routerConfig: routerConfig,
+          theme: myTheme,
+        );
+      },
     );
   }
 }

lib/pages/app_settings.dart

@@ -1,3 +1,4 @@
+import 'package:animated_theme_switcher/animated_theme_switcher.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:flutter_settings_ui/flutter_settings_ui.dart';
@@ -5,6 +6,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:whispering_pages/api/authenticated_user_provider.dart';
 import 'package:whispering_pages/api/server_provider.dart';
 import 'package:whispering_pages/settings/app_settings_provider.dart';
+import 'package:whispering_pages/theme/theme.dart';
 
 class AppSettingsPage extends HookConsumerWidget {
   const AppSettingsPage({
@@ -20,45 +22,120 @@ class AppSettingsPage extends HookConsumerWidget {
     final serverURIController = useTextEditingController();
     final formKey = GlobalKey<FormState>();
 
-    return Scaffold(
+    return ThemeSwitchingArea(
-      appBar: AppBar(
+      child: Builder(
-        title: const Text('App Settings'),
+        builder: (context) {
-      ),
+          return Scaffold(
-      body: SettingsList(
+            appBar: AppBar(
-        sections: [
+              title: const Text('App Settings'),
-          SettingsSection(
+            ),
-            title: const Text('Appearance'),
+            body: SettingsList(
-            tiles: [
+              sections: [
-              SettingsTile.switchTile(
+                SettingsSection(
-                initialValue: appSettings.isDarkMode,
+                  title: const Text('Appearance'),
-                title: const Text('Dark Mode'),
+                  tiles: [
-                description: const Text('we all know dark mode is better'),
+                    ThemeSwitcherTile(
-                leading: appSettings.isDarkMode
+                      initialValue: appSettings.isDarkMode,
-                    ? const Icon(Icons.dark_mode)
+                      title: const Text('Dark Mode'),
-                    : const Icon(Icons.light_mode),
+                      description:
-                onToggle: (value) {
+                          const Text('we all know dark mode is better'),
-                  ref.read(appSettingsProvider.notifier).toggleDarkMode();
+                      leading: (appSettings.isDarkMode
-                },
+                          ? const Icon(Icons.dark_mode)
-              ),
+                          : const Icon(Icons.light_mode)),
-              SettingsTile.switchTile(
+                      onToggle: (value, context) {
-                initialValue: appSettings.useMaterialThemeOnItemPage,
+                        ThemeSwitcher.of(context)
-                title: const Text('Use Material Theming on Item Page'),
+                            .changeTheme(theme: value ? darkTheme : lightTheme);
-                description: const Text(
+                        ref.read(appSettingsProvider.notifier).toggleDarkMode();
-                  'get fancy with the colors on the item page at the cost of some performance',
+                      },
+                    ),
+                    SettingsTile.switchTile(
+                      initialValue: appSettings.useMaterialThemeOnItemPage,
+                      title: const Text('Use Material Theming on Item Page'),
+                      description: const Text(
+                        'get fancy with the colors on the item page at the cost of some performance',
+                      ),
+                      leading: const Icon(Icons.dynamic_form_outlined),
+                      onToggle: (value) {
+                        ref.read(appSettingsProvider.notifier).updateState(
+                              appSettings.copyWith(
+                                useMaterialThemeOnItemPage: value,
+                              ),
+                            );
+                      },
+                    ),
+                  ],
                 ),
-                leading: const Icon(Icons.dynamic_form_outlined),
+              ],
-                onToggle: (value) {
+            ),
-                  ref.read(appSettingsProvider.notifier).updateState(
+          );
-                        appSettings.copyWith(
+        },
-                          useMaterialThemeOnItemPage: value,
-                        ),
-                      );
-                },
-              ),
-            ],
-          ),
-        ],
       ),
     );
   }
 }
+
+// a custom settings tile that extends AbstractSettingsTile but also returns ThemeSwitcher
+// so we can switch themes by using the switch tile ans ThemeSwitcher.of(context).changeTheme()
+// it is nothing but a wrapper around the switch tile so the type is settings tile but also contains a theme switcher
+class ThemeSwitcherTile extends AbstractSettingsTile {
+  ThemeSwitcherTile({
+    required this.initialValue,
+    required this.onToggle,
+    this.descriptionInlineIos = false,
+    this.activeSwitchColor,
+    this.leading,
+    this.trailing,
+    required this.title,
+    this.description,
+    this.onPressed,
+    this.enabled = true,
+    this.backgroundColor,
+    super.key,
+  }) {
+    value = null;
+    tileType = SettingsTileType.switchTile;
+  }
+
+  final Widget? leading;
+
+  final Widget? trailing;
+
+  final Widget title;
+
+  final Widget? description;
+
+  final bool descriptionInlineIos;
+
+  final Color? backgroundColor;
+
+  final Function(BuildContext context)? onPressed;
+
+  late final Color? activeSwitchColor;
+  late final Widget? value;
+  late final Function(bool value, BuildContext context)? onToggle;
+  late final SettingsTileType tileType;
+  late final bool? initialValue;
+  late final bool enabled;
+
+  @override
+  Widget build(BuildContext context) {
+    return ThemeSwitcher(
+      builder: (context) {
+        return SettingsTile.switchTile(
+          initialValue: initialValue,
+          title: title,
+          description: description,
+          descriptionInlineIos: descriptionInlineIos,
+          leading: leading,
+          trailing: trailing,
+          onToggle: (value) {
+            onToggle?.call(value, context);
+          },
+          onPressed: onPressed,
+          enabled: enabled,
+          backgroundColor: backgroundColor,
+        );
+      },
+    );
+  }
+}