Skip to content
Snippets Groups Projects
Commit 1f147468 authored by Benoît Harrault's avatar Benoît Harrault
Browse files

Add light/dark theme selector

parent 1f8b60a4
No related branches found
No related tags found
1 merge request!21Resolve "Add light/dark theme selector"
Pipeline #5466 passed
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
......@@ -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: ",
......
......@@ -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 : ",
......
Add light/dark theme setting.
Ajout d'un réglage de thème clair/sombre.
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()};
}
}
part of 'theme_cubit.dart';
@immutable
class ThemeModeState extends Equatable {
const ThemeModeState({
this.themeMode,
});
final ThemeMode? themeMode;
@override
List<Object?> get props => <Object?>[
themeMode,
];
}
......@@ -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(
child: BlocBuilder<ThemeCubit, ThemeModeState>(
builder: (BuildContext context, ThemeModeState state) {
return MaterialApp(
title: 'Twister',
theme: appTheme,
home: const SkeletonScreen(),
// Theme stuff
theme: lightTheme,
darkTheme: darkTheme,
themeMode: state.themeMode,
// Localization stuff
localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,
debugShowCheckedModeBanner: false,
),
);
}),
);
}
}
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
......
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,
),
),
);
});
}
}
......@@ -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'
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment