feat(dark): add dark mode

XPEHO · Feb 22, 2022 · 094cf14 · 094cf14
1 parent f7acc3a
commit 094cf14
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 16 deletions.
diff --git a/lib/app/app.dart b/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.black,
+            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,
+          ),
         );
       },
     );

diff --git a/lib/view/homepage/homepage.dart b/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';
@@ -17,11 +18,19 @@ class HomePage extends StatefulWidget {
 class _HomePageState extends State<HomePage> {
   final formKey = GlobalKey<FormState>();
   String nickname = "";
+  bool darkmode = false;
+  dynamic savedThemeMode;
+
+  @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: [
@@ -32,7 +41,6 @@ class _HomePageState extends State<HomePage> {
           Column(
             children: [
               headerHomePage(context),
-              // const SizedBox(height: 16),
               Padding(
                 padding: const EdgeInsets.only(
                   top: 18.0,
@@ -126,6 +134,19 @@ class _HomePageState extends State<HomePage> {
     );
   }
 
+  Future getCurrentTheme() async {
+    savedThemeMode = await AdaptiveTheme.getThemeMode();
+    if (savedThemeMode.toString() == 'AdaptiveThemeMode.dark') {
+      setState(() {
+        darkmode = true;
+      });
+    } else {
+      setState(() {
+        darkmode = false;
+      });
+    }
+  }
+
   Widget bottomBadges() {
     return Row(
       mainAxisAlignment: MainAxisAlignment.spaceAround,
@@ -243,6 +264,29 @@ class _HomePageState extends State<HomePage> {
           ),
           onTap: () {},
         ),
+        darkmode == false
+            ? IconButton(
+                onPressed: () {
+                  setState(() {
+                    darkmode = true;
+                    AdaptiveTheme.of(context).setDark();
+                  });
+                },
+                icon: const Icon(
+                  Icons.wb_sunny,
+                ),
+              )
+            : IconButton(
+                onPressed: () {
+                  setState(() {
+                    darkmode = false;
+                    AdaptiveTheme.of(context).setLight();
+                  });
+                },
+                icon: const Icon(
+                  Icons.dark_mode,
+                ),
+              ),
       ],
     );
   }

diff --git a/lib/view/leaderboard_page/leaderboard_page.dart b/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) {

diff --git a/lib/view/puzzle_page/puzzle_page.dart b/lib/view/puzzle_page/puzzle_page.dart
@@ -153,7 +153,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),

diff --git a/pubspec.yaml b/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