Merge branch '64-add-light-dark-theme-selector' into 'master'

Resolve "Add light/dark theme selector"

Closes #64

See merge request !62

android/gradle.properties

 org.gradle.jvmargs=-Xmx1536M
 android.useAndroidX=true
 android.enableJetifier=true
-app.versionName=1.0.50
-app.versionCode=51
+app.versionName=1.0.51
+app.versionCode=52

assets/translations/en.json

@@ -12,6 +12,7 @@
   "api_page_title": "API",
 
   "settings_title": "Settings",
+  "settings_label_theme": "Theme mode",
   "settings_label_api_url": "API URL:",
   "settings_label_security_token": "Security token:",
   "settings_label_interface_type": "Interface type:",

assets/translations/fr.json

@@ -12,6 +12,7 @@
   "api_page_title": "API",
 
   "settings_title": "Paramètres",
+  "settings_label_theme": "Thème de couleurs",
   "settings_label_api_url": "URL de l'API :",
   "settings_label_security_token": "Jeton de sécurité :",
   "settings_label_interface_type": "Type d'interface :",

lib/config/menu.dart

@@ -62,7 +62,10 @@ class Menu {
   ];
 
   static Widget getPageWidget(int pageIndex) {
-    return Menu.items.elementAt(pageIndex).page;
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 8),
+      child: Menu.items.elementAt(pageIndex).page,
+    );
   }
 
   static List<BottomNavigationBarItem> getMenuItems() {

lib/cubit/theme_cubit.dart

+import 'package:equatable/equatable.dart';
+import 'package:flutter/material.dart';
+import 'package:hydrated_bloc/hydrated_bloc.dart';
+
+part 'theme_state.dart';
+
+class ThemeCubit extends HydratedCubit<ThemeModeState> {
+  ThemeCubit() : super(const ThemeModeState());
+
+  void getTheme(ThemeModeState state) {
+    emit(state);
+  }
+
+  @override
+  ThemeModeState? fromJson(Map<String, dynamic> json) {
+    switch (json['themeMode']) {
+      case 'ThemeMode.dark':
+        return const ThemeModeState(themeMode: ThemeMode.dark);
+      case 'ThemeMode.light':
+        return const ThemeModeState(themeMode: ThemeMode.light);
+      case 'ThemeMode.system':
+      default:
+        return const ThemeModeState(themeMode: ThemeMode.system);
+    }
+  }
+
+  @override
+  Map<String, String>? toJson(ThemeModeState state) {
+    return <String, String>{'themeMode': state.themeMode.toString()};
+  }
+}

lib/cubit/theme_state.dart

+part of 'theme_cubit.dart';
+
+@immutable
+class ThemeModeState extends Equatable {
+  const ThemeModeState({
+    this.themeMode,
+  });
+
+  final ThemeMode? themeMode;
+
+  @override
+  List<Object?> get props => <Object?>[
+        themeMode,
+      ];
+}

lib/main.dart

@@ -8,11 +8,12 @@ import 'package:hydrated_bloc/hydrated_bloc.dart';
 import 'package:path_provider/path_provider.dart';
 
 import 'package:random/config/theme.dart';
+import 'package:random/cubit/api_cubit.dart';
 import 'package:random/cubit/bottom_nav_cubit.dart';
 import 'package:random/cubit/data_cubit.dart';
 import 'package:random/cubit/game_cubit.dart';
 import 'package:random/cubit/settings_cubit.dart';
-import 'package:random/cubit/api_cubit.dart';
+import 'package:random/cubit/theme_cubit.dart';
 import 'package:random/repository/api.dart';
 import 'package:random/network/api.dart';
 import 'package:random/ui/skeleton.dart';
@@ -48,10 +49,6 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MultiBlocProvider(
       providers: [
-        BlocProvider<SettingsCubit>(create: (context) => SettingsCubit()),
-        BlocProvider<BottomNavCubit>(create: (context) => BottomNavCubit()),
-        BlocProvider<DataCubit>(create: (context) => DataCubit()),
-        BlocProvider<GameCubit>(create: (context) => GameCubit()),
         BlocProvider<ApiDataCubit>(
           create: (context) => ApiDataCubit(
             apiRepository: ApiRepository(
@@ -59,16 +56,26 @@ class MyApp extends StatelessWidget {
             ),
           )..fetchApiData(),
         ),
+        BlocProvider<BottomNavCubit>(create: (context) => BottomNavCubit()),
+        BlocProvider<DataCubit>(create: (context) => DataCubit()),
+        BlocProvider<GameCubit>(create: (context) => GameCubit()),
+        BlocProvider<SettingsCubit>(create: (context) => SettingsCubit()),
+        BlocProvider<ThemeCubit>(create: (context) => ThemeCubit()),
       ],
-      child: MaterialApp(
-        title: 'Random application',
-        theme: appTheme,
-        home: const SkeletonScreen(),
-        localizationsDelegates: context.localizationDelegates,
-        supportedLocales: context.supportedLocales,
-        locale: context.locale,
-        debugShowCheckedModeBanner: false,
-      ),
+      child: BlocBuilder<ThemeCubit, ThemeModeState>(
+          builder: (BuildContext context, ThemeModeState state) {
+        return MaterialApp(
+          title: 'Random application',
+          theme: lightTheme,
+          darkTheme: darkTheme,
+          themeMode: state.themeMode,
+          home: const SkeletonScreen(),
+          localizationsDelegates: context.localizationDelegates,
+          supportedLocales: context.supportedLocales,
+          locale: context.locale,
+          debugShowCheckedModeBanner: false,
+        );
+      }),
     );
   }
 }

lib/ui/screens/game_page.dart

@@ -25,7 +25,7 @@ class _GamePageState extends State<GamePage> {
             gameCubit.updateGameState(Game.createNew());
           },
           icon: const Icon(UniconsSolid.star),
-          color: Colors.white,
+          color: Theme.of(context).colorScheme.primary,
         )
       ];
 
@@ -39,7 +39,7 @@ class _GamePageState extends State<GamePage> {
             setState(() {});
           },
           icon: const Icon(UniconsLine.exit),
-          color: Colors.white,
+          color: Theme.of(context).colorScheme.primary,
         ));
       }
 

lib/ui/widgets/settings_form.dart

@@ -6,6 +6,7 @@ import 'package:unicons/unicons.dart';
 import 'package:random/cubit/settings_cubit.dart';
 import 'package:random/config/theme.dart';
 import 'package:random/models/interface_type.dart';
+import 'package:random/ui/widgets/theme_card.dart';
 
 class SettingsForm extends StatefulWidget {
   const SettingsForm({super.key});
@@ -54,6 +55,35 @@ class _SettingsFormState extends State<SettingsForm> {
       crossAxisAlignment: CrossAxisAlignment.start,
       mainAxisSize: MainAxisSize.max,
       children: <Widget>[
+        // Light/dark theme
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: <Widget>[
+            const Text('settings_label_theme').tr(),
+            const Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                ThemeCard(
+                  mode: ThemeMode.system,
+                  icon: UniconsLine.cog,
+                ),
+                ThemeCard(
+                  mode: ThemeMode.light,
+                  icon: UniconsLine.sun,
+                ),
+                ThemeCard(
+                  mode: ThemeMode.dark,
+                  icon: UniconsLine.moon,
+                )
+              ],
+            ),
+          ],
+        ),
+
+        const SizedBox(height: 16),
+
         const Text('settings_label_api_url').tr(),
         TextFormField(
           controller: apiUrlController,
@@ -61,7 +91,9 @@ class _SettingsFormState extends State<SettingsForm> {
             border: UnderlineInputBorder(),
           ),
         ),
+
         const SizedBox(height: 16),
+
         const Text('settings_label_security_token').tr(),
         TextFormField(
           controller: securityTokenController,
@@ -69,7 +101,9 @@ class _SettingsFormState extends State<SettingsForm> {
             border: UnderlineInputBorder(),
           ),
         ),
+
         const SizedBox(height: 16),
+
         const Text('settings_label_interface_type').tr(),
         ToggleButtons(
           direction: Axis.horizontal,

lib/ui/widgets/theme_card.dart

+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import 'package:random/cubit/theme_cubit.dart';
+
+class ThemeCard extends StatelessWidget {
+  const ThemeCard({
+    super.key,
+    required this.mode,
+    required this.icon,
+  });
+
+  final IconData icon;
+  final ThemeMode mode;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<ThemeCubit, ThemeModeState>(
+        builder: (BuildContext context, ThemeModeState state) {
+      return Card(
+        elevation: 2,
+        shadowColor: Theme.of(context).colorScheme.shadow,
+        color: state.themeMode == mode
+            ? Theme.of(context).colorScheme.primary
+            : Theme.of(context).colorScheme.surface,
+        shape: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(12)),
+        ),
+        margin: const EdgeInsets.all(5),
+        child: InkWell(
+          onTap: () => BlocProvider.of<ThemeCubit>(context).getTheme(
+            ThemeModeState(themeMode: mode),
+          ),
+          borderRadius: const BorderRadius.all(Radius.circular(12)),
+          child: Icon(
+            icon,
+            size: 32,
+            color:
+                state.themeMode != mode ? Theme.of(context).colorScheme.primary : Colors.white,
+          ),
+        ),
+      );
+    });
+  }
+}

pubspec.yaml

@@ -3,7 +3,7 @@ description: A random application, for testing purpose only.
 
 publish_to: 'none'
 
-version: 1.0.50+51
+version: 1.0.51+52
 
 environment:
   sdk: '^3.0.0'