From 3a4496fc49ddd6e3117319c0b38cbc8ceae3e49d 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 --- .github/workflows/ci.yaml | 6 +- .github/workflows/firebase-hosting-merge.yml | 2 +- .../firebase-hosting-pull-request.yml | 2 +- lib/app/app.dart | 37 ++-- lib/l10n/app_en.arb | 4 + lib/l10n/app_fr.arb | 3 +- lib/theme/theme.dart | 1 + lib/view/homepage/homepage.dart | 161 ++++++++++++------ lib/view/homepage/widgets/menu_button.dart | 3 +- .../leaderboard_page/leaderboard_page.dart | 2 +- lib/view/puzzle_page/puzzle_page.dart | 2 +- pubspec.yaml | 1 + 12 files changed, 148 insertions(+), 76 deletions(-) diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index d59ff9b..08de1b5 100644 --- a/.github/workflows/ci.yaml +++ b/.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 diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml index 9d6b334..33968d5 100644 --- a/.github/workflows/firebase-hosting-merge.yml +++ b/.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 diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml index db67938..822dd55 100644 --- a/.github/workflows/firebase-hosting-pull-request.yml +++ b/.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 diff --git a/lib/app/app.dart b/lib/app/app.dart index 14dbd71..8bf5362 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.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, + ), ); }, ); diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb index 7aea849..66bdfb3 100644 --- a/lib/l10n/app_en.arb +++ b/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 : " } } \ No newline at end of file diff --git a/lib/l10n/app_fr.arb b/lib/l10n/app_fr.arb index 8d5d4a3..c188a2f 100644 --- a/lib/l10n/app_fr.arb +++ b/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 : " } \ No newline at end of file diff --git a/lib/theme/theme.dart b/lib/theme/theme.dart index f9e012e..9906e55 100644 --- a/lib/theme/theme.dart +++ b/lib/theme/theme.dart @@ -14,3 +14,4 @@ Map color = { }; MaterialColor xpehoGreen = MaterialColor(0xFFB3D26B, color); +Color xpehoGreenDark = const Color.fromARGB(255, 11, 66, 40); diff --git a/lib/view/homepage/homepage.dart b/lib/view/homepage/homepage.dart index fb531f5..0eebb5a 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'; @@ -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 { final formKey = GlobalKey(); - 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 { 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 { ); } + 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 { left: 4.0, ), child: Text( - "IOS/MacOS", + 'IOS/MacOS', style: TextStyle( color: Colors.white, ), @@ -180,7 +221,7 @@ class _HomePageState extends State { left: 4.0, ), child: Text( - "Android", + 'Android', style: TextStyle( color: Colors.white, ), @@ -212,7 +253,7 @@ class _HomePageState extends State { left: 4.0, ), child: Text( - "Windows/Linux/WEB", + 'Windows/Linux/WEB', style: TextStyle( color: Colors.white, ), @@ -230,20 +271,30 @@ class _HomePageState extends State { ); } - 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 = !darkmode; + darkmode + ? AdaptiveTheme.of(context).setLight() + : AdaptiveTheme.of(context).setDark(); + }); + }, + icon: Icon( + darkmode ? Icons.dark_mode : Icons.wb_sunny, + ), ); } } diff --git a/lib/view/homepage/widgets/menu_button.dart b/lib/view/homepage/widgets/menu_button.dart index 32d9508..a7dc294 100644 --- a/lib/view/homepage/widgets/menu_button.dart +++ b/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 { decoration: BoxDecoration( color: widget.isClickable ? Theme.of(context).primaryColor - : const Color.fromARGB(255, 11, 66, 40), + : xpehoGreenDark, borderRadius: BorderRadius.circular(10), boxShadow: _isElevated ? [ 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