From 094cf1431ad5ce1cb5adea3d66fc15ee7b4c9987 Mon Sep 17 00:00:00 2001 From: MayuriXx Date: Mon, 21 Feb 2022 22:54:18 +0100 Subject: [PATCH] feat(dark): add dark mode --- lib/app/app.dart | 37 +++++++++----- lib/view/homepage/homepage.dart | 48 ++++++++++++++++++- .../leaderboard_page/leaderboard_page.dart | 2 +- lib/view/puzzle_page/puzzle_page.dart | 2 +- pubspec.yaml | 1 + 5 files changed, 74 insertions(+), 16 deletions(-) diff --git a/lib/app/app.dart b/lib/app/app.dart index 14dbd71..3507bb3 100644 --- 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 index fb531f5..e68cacd 100644 --- 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 { final formKey = GlobalKey(); 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 { Column( children: [ headerHomePage(context), - // const SizedBox(height: 16), Padding( padding: const EdgeInsets.only( top: 18.0, @@ -126,6 +134,19 @@ class _HomePageState extends State { ); } + 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 { ), 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 index 43480ac..fab3e3c 100644 --- a/lib/view/leaderboard_page/leaderboard_page.dart +++ b/lib/view/leaderboard_page/leaderboard_page.dart @@ -19,7 +19,7 @@ class _LeaderboardPageState extends State { @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 index ad60943..0fecaac 100644 --- a/lib/view/puzzle_page/puzzle_page.dart +++ b/lib/view/puzzle_page/puzzle_page.dart @@ -153,7 +153,7 @@ class _PuzzlePageState extends State { /// 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 index b56f0b5..f62ccde 100644 --- 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