Update Example

Author: MahanRahmati

CHANGELOG.md

@@ -18,6 +18,7 @@
 - Update ArnaTextButton
 - Update ArnaListTile
 - Update ArnaPopupMenuButton
+- [Example] Update Example
 
 ## 0.4.7
 

example/lib/main.dart

@@ -14,18 +14,18 @@ class MyApp extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final Theme theme = ref.watch(themeProvider);
+    final ArnaThemeMode theme = ref.watch(themeProvider);
     final Color accentColor = ref.watch(accentProvider);
     Brightness? brightness;
 
     switch (theme) {
-      case Theme.dark:
+      case ArnaThemeMode.dark:
         brightness = Brightness.dark;
         break;
-      case Theme.light:
+      case ArnaThemeMode.light:
         brightness = Brightness.light;
         break;
-      case Theme.system:
+      case ArnaThemeMode.system:
         brightness = null;
     }
 
@@ -49,7 +49,6 @@ class Home extends ConsumerStatefulWidget {
 
 class _HomeState extends ConsumerState<Home> {
   Uri url = Uri(scheme: 'https', host: 'github.com', path: 'MahanRahmati/Arna');
-  bool showMaster = false;
 
   @override
   Widget build(BuildContext context) {
@@ -98,7 +97,7 @@ class _HomeState extends ConsumerState<Home> {
       ],
     );
 
-    return showMaster
+    return ref.watch(masterProvider)
         ? ArnaMasterDetailScaffold(
             title: 'Arna Demo',
             actions: <Widget>[

example/lib/screens/settings.dart

@@ -6,7 +6,8 @@ class Settings extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final Theme themeMode = ref.watch(themeProvider);
+    final ArnaThemeMode themeMode = ref.watch(themeProvider);
+    final bool masterMode = ref.watch(masterProvider);
     final Color accentColor = ref.watch(accentProvider);
     return SingleChildScrollView(
       child: Column(
@@ -16,23 +17,34 @@ class Settings extends ConsumerWidget {
             showDividers: true,
             showBackground: true,
             children: <Widget>[
-              ArnaRadioListTile<Theme>(
-                value: Theme.system,
+              ArnaRadioListTile<ArnaThemeMode>(
+                value: ArnaThemeMode.system,
                 groupValue: themeMode,
                 title: 'System',
-                onChanged: (_) => ref.read(themeProvider.notifier).state = Theme.system,
+                onChanged: (_) => ref.read(themeProvider.notifier).state = ArnaThemeMode.system,
               ),
-              ArnaRadioListTile<Theme>(
-                value: Theme.dark,
+              ArnaRadioListTile<ArnaThemeMode>(
+                value: ArnaThemeMode.dark,
                 groupValue: themeMode,
                 title: 'Dark',
-                onChanged: (_) => ref.read(themeProvider.notifier).state = Theme.dark,
+                onChanged: (_) => ref.read(themeProvider.notifier).state = ArnaThemeMode.dark,
               ),
-              ArnaRadioListTile<Theme>(
-                value: Theme.light,
+              ArnaRadioListTile<ArnaThemeMode>(
+                value: ArnaThemeMode.light,
                 groupValue: themeMode,
                 title: 'Light',
-                onChanged: (_) => ref.read(themeProvider.notifier).state = Theme.light,
+                onChanged: (_) => ref.read(themeProvider.notifier).state = ArnaThemeMode.light,
+              ),
+            ],
+          ),
+          ArnaList(
+            title: 'Scaffold',
+            showBackground: true,
+            children: <Widget>[
+              ArnaSwitchListTile(
+                value: masterMode,
+                title: 'Use Master-Detail',
+                onChanged: (_) => ref.read(masterProvider.notifier).state = !masterMode,
               ),
             ],
           ),
@@ -74,10 +86,24 @@ class Settings extends ConsumerWidget {
   }
 }
 
-enum Theme { system, dark, light }
+/// Describes which theme will be used by.
+enum ArnaThemeMode {
+  /// Use either the light or dark theme based on what the user has selected in the system settings.
+  system,
+
+  /// Always use the dark mode regardless of system preference.
+  dark,
+
+  /// Always use the light mode regardless of system preference.
+  light,
+}
+
+final AutoDisposeStateProvider<ArnaThemeMode> themeProvider = StateProvider.autoDispose<ArnaThemeMode>(
+  (AutoDisposeStateProviderRef<ArnaThemeMode> ref) => ArnaThemeMode.system,
+);
 
-final AutoDisposeStateProvider<Theme> themeProvider = StateProvider.autoDispose<Theme>(
-  (AutoDisposeStateProviderRef<Theme> ref) => Theme.system,
+final AutoDisposeStateProvider<bool> masterProvider = StateProvider.autoDispose<bool>(
+  (AutoDisposeStateProviderRef<bool> ref) => false,
 );
 
 final AutoDisposeStateProvider<Color> accentProvider = StateProvider.autoDispose<Color>(