feat(dark): add dark mode

.github/workflows/ci.yaml

@@ -10,7 +10,7 @@ jobs:
           java-version: '12.x'
       - uses: subosito/flutter-action@v2
         with:
-          flutter-version: '2.10.0'
+          flutter-version: '2.10.2'
       - name: create firebase options
         run: |
           echo $FIREBASE_OPTIONS | base64 -d > lib/firebase_options.dart
@@ -39,7 +39,7 @@ jobs:
           java-version: '12.x'
       - uses: subosito/flutter-action@v2
         with:
-          flutter-version: '2.10.0'
+          flutter-version: '2.10.2'
       - name: create firebase options
         run: |
           echo "${{ env.FIREBASE_OPTIONS }}" | base64 -d > lib\firebase_options.dart
@@ -71,7 +71,7 @@ jobs:
           java-version: '12.x'
       - uses: subosito/flutter-action@v2
         with:
-          flutter-version: '2.10.0'
+          flutter-version: '2.10.2'
       - name: create firebase options
         run: |
           echo $FIREBASE_OPTIONS | base64 -d > lib/firebase_options.dart

.github/workflows/firebase-hosting-merge.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: subosito/flutter-action@v2
         with:
-          flutter-version: '2.8.1'
+          flutter-version: '2.10.2'
       - name: create firebase options
         run: |
           echo $FIREBASE_OPTIONS | base64 -d > lib/firebase_options.dart

.github/workflows/firebase-hosting-pull-request.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: subosito/flutter-action@v2
         with:
-          flutter-version: '2.8.1'
+          flutter-version: '2.10.2'
       - name: create firebase options
         run: |
           echo $FIREBASE_OPTIONS | base64 -d > lib/firebase_options.dart

lib/app/app.dart

@@ -1,8 +1,8 @@
+import 'package:adaptive_theme/adaptive_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:puzzle/bloc/bloc.dart';
 import 'package:puzzle/services/shared.dart';
 import 'package:puzzle/theme/theme.dart';
@@ -23,17 +23,30 @@ class PuzzleApp extends StatelessWidget {
           SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
         }
 
-        return MaterialApp.router(
-          routeInformationParser: _router.routeInformationParser,
-          routerDelegate: _router.routerDelegate,
-          onGenerateTitle: (context) => AppLocalizations.of(context)!.app_name,
-          localizationsDelegates: AppLocalizations.localizationsDelegates,
-          supportedLocales: AppLocalizations.supportedLocales,
-          theme: ThemeData(
-              primarySwatch: xpehoGreen,
-              textTheme: GoogleFonts.aBeeZeeTextTheme(),
-              backgroundColor: Colors.white,),
-          themeMode: ThemeMode.light,
+        return AdaptiveTheme(
+          light: ThemeData(
+            brightness: Brightness.light,
+            primarySwatch: xpehoGreen,
+            backgroundColor: Colors.white,
+            primaryColor: xpehoGreen,
+          ),
+          dark: ThemeData(
+            brightness: Brightness.dark,
+            primarySwatch: xpehoGreen,
+            backgroundColor: Colors.grey[900],
+            primaryColor: xpehoGreen,
+          ),
+          initial: AdaptiveThemeMode.light,
+          builder: (theme, darkTheme) => MaterialApp.router(
+            routeInformationParser: _router.routeInformationParser,
+            routerDelegate: _router.routerDelegate,
+            onGenerateTitle: (context) =>
+                AppLocalizations.of(context)!.app_name,
+            localizationsDelegates: AppLocalizations.localizationsDelegates,
+            supportedLocales: AppLocalizations.supportedLocales,
+            theme: theme,
+            darkTheme: darkTheme,
+          ),
         );
       },
     );

lib/l10n/app_en.arb

@@ -76,5 +76,9 @@
     "leader_board_subtitle": "Scoreboard : ",
     "@leader_board_subtitle": {
       "description": "Scoreboard : "
+    },
+    "bottom_badges_title": "CrossPlatform : ",
+    "@bottom_badges_title": {
+      "description": "CrossPlatform : "
     }
 }

lib/l10n/app_fr.arb

@@ -16,5 +16,6 @@
     "nickname_hint": "Entrez votre pseudo...",
     "your_score": "Votre score: {value}",
     "empty_nickname_error": "Le pseudonyme ne peut être vide",
-    "leader_board_subtitle": "Tableau des scores : "
+    "leader_board_subtitle": "Tableau des scores : ",
+    "bottom_badges_title": "Multiplateforme : "
 }

lib/theme/theme.dart

@@ -14,3 +14,4 @@ Map<int, Color> color = {
 };
 
 MaterialColor xpehoGreen = MaterialColor(0xFFB3D26B, color);
+Color xpehoGreenDark = const Color.fromARGB(255, 11, 66, 40);

lib/view/homepage/homepage.dart

@@ -1,3 +1,4 @@
+import 'package:adaptive_theme/adaptive_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:go_router/go_router.dart';
@@ -7,7 +8,7 @@ import 'package:puzzle/view/homepage/widgets/menu_button.dart';
 import 'package:puzzle/view/view.dart';
 
 class HomePage extends StatefulWidget {
-  static const String route = "/homePage";
+  static const String route = '/homePage';
   const HomePage({Key? key}) : super(key: key);
 
   @override
@@ -16,56 +17,83 @@ class HomePage extends StatefulWidget {
 
 class _HomePageState extends State<HomePage> {
   final formKey = GlobalKey<FormState>();
-  String nickname = "";
+  String nickname = '';
+  bool darkmode = false;
+
+  @override
+  void initState() {
+    super.initState();
+    getCurrentTheme();
+  }
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: Colors.white,
+      backgroundColor: Theme.of(context).backgroundColor,
       body: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          Align(
-            alignment: Alignment.topRight,
-            child: paramHomePage(),
+          Expanded(
+            flex: 1,
+            child: Align(
+              alignment: Alignment.topRight,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: [
+                  darkModeButton(),
+                  levelButton(),
+                ],
+              ),
+            ),
           ),
-          Column(
-            children: [
-              headerHomePage(context),
-              // const SizedBox(height: 16),
-              Padding(
-                padding: const EdgeInsets.only(
-                  top: 18.0,
-                  bottom: 18.0,
-                ),
-                child: MenuButton(
-                  redirection: () {
-                    LeaderboardProvider().updateUserNickname(nickname);
-                    GoRouter.of(context).go(
-                      PuzzlePage.route,
-                    );
-                  },
-                  text: AppLocalizations.of(context)!.play,
-                  isClickable: nickname.isNotEmpty,
-                ),
+          Expanded(
+            flex: 3,
+            child: headerHomePage(context),
+          ),
+          Expanded(
+            flex: 1,
+            child: Padding(
+              padding: const EdgeInsets.only(
+                top: 9.0,
+                bottom: 9.0,
               ),
-            ],
+              child: MenuButton(
+                redirection: () {
+                  LeaderboardProvider().updateUserNickname(nickname);
+                  GoRouter.of(context).go(
+                    PuzzlePage.route,
+                  );
+                },
+                text: AppLocalizations.of(context)!.play,
+                isClickable: nickname.isNotEmpty,
+              ),
+            ),
           ),
           if (isFirebaseUsable())
-            Center(
-              child: MenuButton(
-                redirection: () => GoRouter.of(context).go(
-                  LeaderboardPage.route,
+            Expanded(
+              flex: 1,
+              child: Padding(
+                padding: const EdgeInsets.only(
+                  top: 9.0,
+                  bottom: 9.0,
+                ),
+                child: MenuButton(
+                  redirection: () => GoRouter.of(context).go(
+                    LeaderboardPage.route,
+                  ),
+                  text: AppLocalizations.of(context)!.leaderboard_btn,
+                  isClickable: true,
                 ),
-                text: AppLocalizations.of(context)!.leaderboard_btn,
-                isClickable: true,
               ),
             ),
-          Align(
-            alignment: Alignment.bottomCenter,
-            child: Padding(
-              padding: const EdgeInsets.only(top: 32.0),
-              child: bottomBadges(),
+          Expanded(
+            flex: 2,
+            child: Align(
+              alignment: Alignment.bottomCenter,
+              child: Padding(
+                padding: const EdgeInsets.only(bottom: 18.0),
+                child: bottomBadges(),
+              ),
             ),
           ),
         ],
@@ -80,7 +108,7 @@ class _HomePageState extends State<HomePage> {
           AppLocalizations.of(context)!.team_name,
           textAlign: TextAlign.center,
           style: TextStyle(
-            fontFamily: "QueenOfTheModernAge",
+            fontFamily: 'QueenOfTheModernAge',
             fontSize: 48,
             color: Theme.of(context).primaryColor,
           ),
@@ -126,6 +154,19 @@ class _HomePageState extends State<HomePage> {
     );
   }
 
+  Future getCurrentTheme() async {
+    final savedThemeMode = await AdaptiveTheme.getThemeMode();
+    if (savedThemeMode.toString() == 'AdaptiveThemeMode.dark') {
+      setState(() {
+        darkmode = true;
+      });
+    } else {
+      setState(() {
+        darkmode = false;
+      });
+    }
+  }
+
   Widget bottomBadges() {
     return Row(
       mainAxisAlignment: MainAxisAlignment.spaceAround,
@@ -148,7 +189,7 @@ class _HomePageState extends State<HomePage> {
                   left: 4.0,
                 ),
                 child: Text(
-                  "IOS/MacOS",
+                  'IOS/MacOS',
                   style: TextStyle(
                     color: Colors.white,
                   ),
@@ -180,7 +221,7 @@ class _HomePageState extends State<HomePage> {
                   left: 4.0,
                 ),
                 child: Text(
-                  "Android",
+                  'Android',
                   style: TextStyle(
                     color: Colors.white,
                   ),
@@ -212,7 +253,7 @@ class _HomePageState extends State<HomePage> {
                   left: 4.0,
                 ),
                 child: Text(
-                  "Windows/Linux/WEB",
+                  'Windows/Linux/WEB',
                   style: TextStyle(
                     color: Colors.white,
                   ),
@@ -230,20 +271,32 @@ class _HomePageState extends State<HomePage> {
     );
   }
 
-  Widget paramHomePage() {
-    return Column(
-      children: [
-        GestureDetector(
-          child: const Padding(
-            padding: EdgeInsets.only(right: 12.0),
-            child: Icon(
-              Icons.settings,
-              size: 30,
-            ),
-          ),
-          onTap: () {},
-        ),
-      ],
+  Widget levelButton() {
+    return IconButton(
+      onPressed: () {
+        setState(() {});
+      },
+      icon: const Icon(
+        Icons.format_list_numbered,
+      ),
+    );
+  }
+
+  Widget darkModeButton() {
+    return IconButton(
+      onPressed: () {
+        setState(
+          () {
+            darkmode
+                ? AdaptiveTheme.of(context).setLight()
+                : AdaptiveTheme.of(context).setDark();
+            darkmode = !darkmode;
+          },
+        );
+      },
+      icon: Icon(
+        darkmode ? Icons.wb_sunny : Icons.dark_mode,
+      ),
     );
   }
 }

lib/view/homepage/widgets/menu_button.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:puzzle/theme/theme.dart';
 
 class MenuButton extends StatefulWidget {
   final Function redirection;
@@ -53,7 +54,7 @@ class _MenuButtonState extends State<MenuButton> {
         decoration: BoxDecoration(
           color: widget.isClickable
               ? Theme.of(context).primaryColor
-              : const Color.fromARGB(255, 11, 66, 40),
+              : xpehoGreenDark,
           borderRadius: BorderRadius.circular(10),
           boxShadow: _isElevated
               ? [

lib/view/leaderboard_page/leaderboard_page.dart

@@ -19,7 +19,7 @@ class _LeaderboardPageState extends State<LeaderboardPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: Colors.white,
+      backgroundColor: Theme.of(context).backgroundColor,
       body: FutureBuilder(
         future: LeaderboardProvider().fetchScores(),
         builder: (context, snapshot) {

lib/view/puzzle_page/puzzle_page.dart

@@ -154,7 +154,7 @@ class _PuzzlePageState extends State<PuzzlePage> {
   /// Build the portrait mode
   Widget _buildPortrait(BuildContext context, PuzzleState state) {
     return Scaffold(
-      backgroundColor: Colors.white,
+      backgroundColor: Theme.of(context).backgroundColor,
       body: SafeArea(
         child: Padding(
           padding: const EdgeInsets.all(16.0),

pubspec.yaml

@@ -27,6 +27,7 @@ environment:
 # the latest version available on pub.dev. To see which dependencies have newer
 # versions available, run `flutter pub outdated`.
 dependencies:
+  adaptive_theme: ^2.3.0
   audioplayers: ^0.20.1
   cloud_firestore: ^3.1.8
   cupertino_icons: ^1.0.2