From 1f147468154d7066e36934b565510d225148ed6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Harrault?= <benoit@harrault.fr>
Date: Sat, 9 Mar 2024 01:01:17 +0100
Subject: [PATCH] Add light/dark theme selector
---
android/gradle.properties | 4 +-
assets/translations/en.json | 1 +
assets/translations/fr.json | 1 +
.../metadata/android/en-US/changelogs/21.txt | 1 +
.../metadata/android/fr-FR/changelogs/21.txt | 1 +
lib/cubit/theme_cubit.dart | 31 +++++++++++++
lib/cubit/theme_state.dart | 15 +++++++
lib/main.dart | 29 +++++++-----
lib/ui/widgets/settings_form.dart | 32 +++++++++++++
lib/ui/widgets/theme_card.dart | 45 +++++++++++++++++++
pubspec.yaml | 2 +-
11 files changed, 149 insertions(+), 13 deletions(-)
create mode 100644 fastlane/metadata/android/en-US/changelogs/21.txt
create mode 100644 fastlane/metadata/android/fr-FR/changelogs/21.txt
create mode 100644 lib/cubit/theme_cubit.dart
create mode 100644 lib/cubit/theme_state.dart
create mode 100644 lib/ui/widgets/theme_card.dart
diff --git a/android/gradle.properties b/android/gradle.properties
index 24add27..eeed3ef 100644
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -1,5 +1,5 @@
org.gradle.jvmargs=-Xmx1536M
android.useAndroidX=true
android.enableJetifier=true
-app.versionName=0.0.20
-app.versionCode=20
+app.versionName=0.0.21
+app.versionCode=21
diff --git a/assets/translations/en.json b/assets/translations/en.json
index a170877..867a994 100644
--- a/assets/translations/en.json
+++ b/assets/translations/en.json
@@ -10,6 +10,7 @@
"bottom_nav_settings": "Settings",
"settings_title": "Settings",
+ "settings_label_theme": "Theme mode",
"settings_title_game": "Game settings",
"settings_label_game_timer_value": "Timer value: ",
diff --git a/assets/translations/fr.json b/assets/translations/fr.json
index 05bbe10..c481788 100644
--- a/assets/translations/fr.json
+++ b/assets/translations/fr.json
@@ -10,6 +10,7 @@
"bottom_nav_settings": "Réglages",
"settings_title": "Réglages",
+ "settings_label_theme": "Thème de couleurs",
"settings_title_game": "Paramètres du jeu",
"settings_label_game_timer_value": "Durée du chrono : ",
diff --git a/fastlane/metadata/android/en-US/changelogs/21.txt b/fastlane/metadata/android/en-US/changelogs/21.txt
new file mode 100644
index 0000000..e466561
--- /dev/null
+++ b/fastlane/metadata/android/en-US/changelogs/21.txt
@@ -0,0 +1 @@
+Add light/dark theme setting.
diff --git a/fastlane/metadata/android/fr-FR/changelogs/21.txt b/fastlane/metadata/android/fr-FR/changelogs/21.txt
new file mode 100644
index 0000000..4a93af7
--- /dev/null
+++ b/fastlane/metadata/android/fr-FR/changelogs/21.txt
@@ -0,0 +1 @@
+Ajout d'un réglage de thème clair/sombre.
diff --git a/lib/cubit/theme_cubit.dart b/lib/cubit/theme_cubit.dart
new file mode 100644
index 0000000..b793e89
--- /dev/null
+++ b/lib/cubit/theme_cubit.dart
@@ -0,0 +1,31 @@
+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()};
+ }
+}
diff --git a/lib/cubit/theme_state.dart b/lib/cubit/theme_state.dart
new file mode 100644
index 0000000..e479a50
--- /dev/null
+++ b/lib/cubit/theme_state.dart
@@ -0,0 +1,15 @@
+part of 'theme_cubit.dart';
+
+@immutable
+class ThemeModeState extends Equatable {
+ const ThemeModeState({
+ this.themeMode,
+ });
+
+ final ThemeMode? themeMode;
+
+ @override
+ List<Object?> get props => <Object?>[
+ themeMode,
+ ];
+}
diff --git a/lib/main.dart b/lib/main.dart
index 04f3952..78da985 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -11,6 +11,7 @@ import 'package:twister/config/theme.dart';
import 'package:twister/cubit/bottom_nav_cubit.dart';
import 'package:twister/cubit/game_cubit.dart';
import 'package:twister/cubit/settings_cubit.dart';
+import 'package:twister/cubit/theme_cubit.dart';
import 'package:twister/ui/skeleton.dart';
void main() async {
@@ -47,18 +48,26 @@ class MyApp extends StatelessWidget {
BlocProvider<BottomNavCubit>(create: (context) => BottomNavCubit()),
BlocProvider<GameCubit>(create: (context) => GameCubit()),
BlocProvider<SettingsCubit>(create: (context) => SettingsCubit()),
+ BlocProvider<ThemeCubit>(create: (context) => ThemeCubit()),
],
- child: MaterialApp(
- title: 'Twister',
- theme: appTheme,
- home: const SkeletonScreen(),
+ child: BlocBuilder<ThemeCubit, ThemeModeState>(
+ builder: (BuildContext context, ThemeModeState state) {
+ return MaterialApp(
+ title: 'Twister',
+ home: const SkeletonScreen(),
- // Localization stuff
- localizationsDelegates: context.localizationDelegates,
- supportedLocales: context.supportedLocales,
- locale: context.locale,
- debugShowCheckedModeBanner: false,
- ),
+ // Theme stuff
+ theme: lightTheme,
+ darkTheme: darkTheme,
+ themeMode: state.themeMode,
+
+ // Localization stuff
+ localizationsDelegates: context.localizationDelegates,
+ supportedLocales: context.supportedLocales,
+ locale: context.locale,
+ debugShowCheckedModeBanner: false,
+ );
+ }),
);
}
}
diff --git a/lib/ui/widgets/settings_form.dart b/lib/ui/widgets/settings_form.dart
index 3bc096c..81fac9e 100644
--- a/lib/ui/widgets/settings_form.dart
+++ b/lib/ui/widgets/settings_form.dart
@@ -1,10 +1,12 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:unicons/unicons.dart';
import 'package:twister/config/default_settings.dart';
import 'package:twister/cubit/settings_cubit.dart';
import 'package:twister/ui/widgets/app_titles.dart';
+import 'package:twister/ui/widgets/theme_card.dart';
class SettingsForm extends StatefulWidget {
const SettingsForm({super.key});
@@ -49,6 +51,36 @@ class _SettingsFormState extends State<SettingsForm> {
mainAxisSize: MainAxisSize.max,
children: <Widget>[
const SizedBox(height: 8),
+
+ // 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),
+
AppTitle2(text: tr('settings_title_game')),
// Timer value
diff --git a/lib/ui/widgets/theme_card.dart b/lib/ui/widgets/theme_card.dart
new file mode 100644
index 0000000..bd935ab
--- /dev/null
+++ b/lib/ui/widgets/theme_card.dart
@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import 'package:twister/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,
+ ),
+ ),
+ );
+ });
+ }
+}
diff --git a/pubspec.yaml b/pubspec.yaml
index a7661d9..e6a8bc4 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -3,7 +3,7 @@ description: twister game companion
publish_to: 'none'
-version: 0.0.20+20
+version: 0.0.21+21
environment:
sdk: '^3.0.0'
--
GitLab