feat: Added a whole route to configure the app theme.

Author: Skyost

lib/i18n/de/settings.json

@@ -28,10 +28,16 @@
     },
     "theme": {
       "title": "Thema",
-      "values(map)": {
+      "subtitle": "Ändern Sie den Anwendungsthemen und Helligkeit.",
+      "name(map)": {
         "system": "System",
         "light": "Hell",
         "dark": "Dunkel"
+      },
+      "description(map)": {
+        "system": "Verwenden Sie das Systemthema.",
+        "light": "Verwenden Sie das Hellenthema.",
+        "dark": "Verwenden Sie das Dunkelthema."
       }
     }
   },

lib/i18n/en/settings.json

@@ -28,10 +28,16 @@
     },
     "theme": {
       "title": "Theme",
-      "values(map)": {
+      "subtitle": "Change the application theme and brightness.",
+      "name(map)": {
         "system": "System",
         "light": "Light",
         "dark": "Dark"
+      },
+      "description(map)": {
+        "system": "Follow the system theme.",
+        "light": "Use the light theme.",
+        "dark": "Use the dark theme."
       }
     }
   },

lib/i18n/fr/settings.json

@@ -28,10 +28,16 @@
     },
     "theme": {
       "title": "Thème",
-      "values(map)": {
+      "subtitle": "Changer le thème de l'application et la luminosité.",
+      "name(map)": {
         "system": "Système",
         "light": "Lumineux",
         "dark": "Sombre"
+      },
+      "description(map)": {
+        "system": "Suivre le thème du système.",
+        "light": "Utiliser le thème lumineux.",
+        "dark": "Utiliser le thème sombre."
       }
     }
   },

lib/i18n/it/settings.json

@@ -28,10 +28,16 @@
     },
     "theme": {
       "title": "Tema",
-      "values(map)": {
+      "subtitle": "Cambia il tema dell'applicazione e la luminosità.",
+      "name(map)": {
         "system": "Sistema",
         "light": "Chiaro",
         "dark": "Scuro"
+      },
+      "description(map)": {
+        "system": "Usa il tema del sistema.",
+        "light": "Usa il tema scuro.",
+        "dark": "Usa il tema scuro."
       }
     }
   },

lib/i18n/pt/settings.json

@@ -28,10 +28,16 @@
     },
     "theme": {
       "title": "Tema",
-      "values(map)": {
+      "subtitle": "Altere o tema da aplicação e a luminosidade.",
+      "name(map)": {
         "system": "Sistema",
         "light": "Claro",
         "dark": "Escuro"
+      },
+      "description(map)": {
+        "system": "Use o tema do sistema.",
+        "light": "Use o tema escuro.",
+        "dark": "Use o tema escuro."
       }
     }
   },

lib/pages/settings/entries/theme.dart

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:open_authenticator/i18n/translations.g.dart';
 import 'package:open_authenticator/model/settings/theme.dart';
-import 'package:open_authenticator/widgets/form/dropdown_list_tile.dart';
 
 /// Allows to configure [themeSettingsEntryProvider].
 class ThemeSettingsEntryWidget extends ConsumerWidget {
@@ -14,23 +13,54 @@ class ThemeSettingsEntryWidget extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     AsyncValue<ThemeMode> theme = ref.watch(themeSettingsEntryProvider);
-    return DropdownListTile(
+    return ListTile(
       enabled: theme.hasValue,
       title: Text(translations.settings.application.theme.title),
-      value: theme.value,
-      choices: [
-        for (ThemeMode mode in ThemeMode.values)
-          DropdownListTileChoice(
-            title: translations.settings.application.theme.values[mode.name]!,
-            icon: mode.icon,
-            value: mode,
+      subtitle: Text(translations.settings.application.theme.subtitle),
+      leading: Icon(theme.value?.icon),
+      trailing: const Padding(
+        padding: EdgeInsets.symmetric(horizontal: 10),
+        child: Icon(Icons.chevron_right),
+      ),
+      onTap: () {
+        Navigator.push(
+          context,
+          MaterialPageRoute(
+            builder: (context) => _ThemeRouteWidget(),
           ),
-      ],
-      onChoiceSelected: (choice) => ref.read(themeSettingsEntryProvider.notifier).changeValue(choice.value),
+        );
+      },
     );
   }
 }
 
+/// Allows to configure the theme.
+class _ThemeRouteWidget extends ConsumerWidget {
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    AsyncValue<ThemeMode> theme = ref.watch(themeSettingsEntryProvider);
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(translations.settings.application.theme.title),
+      ),
+      body: ListView(
+        shrinkWrap: true,
+        children: [
+          for (ThemeMode mode in ThemeMode.values)
+            ListTile(
+              leading: Icon(mode.icon),
+              title: Text(translations.settings.application.theme.name[mode.name]!),
+              subtitle: Text(translations.settings.application.theme.description[mode.name]!),
+              trailing: theme.value == mode ? const Icon(Icons.check) : null,
+              onTap: () => ref.read(themeSettingsEntryProvider.notifier).changeValue(mode),
+            ),
+        ],
+      ),
+    );
+  }
+
+}
+
 /// Allows to associate an icon with a theme mode.
 extension _Icon on ThemeMode? {
   /// Returns the icon associated with the current theme mode.