From 77f671a52ff7b031b68163656ddd66ce97378907 Mon Sep 17 00:00:00 2001 From: VarunS2002 <30069380+VarunS2002@users.noreply.github.com> Date: Mon, 28 Dec 2020 18:10:27 +0530 Subject: [PATCH] Added Dark theme with toggle to switch Moved all Color variables to Styles.dart Now saves current theme locally for subsequent runs Saves it automatically every time you change it Default at first run is Dark theme FAB labels don't support theming yet, will be added if (https://github.com/fysoul17/flutter_speed_dial_material_design/pull/7) is merged --- sudoku/lib/Alerts.dart | 56 +++++++++++----- sudoku/lib/Styles.dart | 77 +++++++++++++++++++++ sudoku/lib/main.dart | 149 ++++++++++++++++++++++++++--------------- 3 files changed, 213 insertions(+), 69 deletions(-) create mode 100644 sudoku/lib/Styles.dart diff --git a/sudoku/lib/Alerts.dart b/sudoku/lib/Alerts.dart index 9719d56..0286a7b 100644 --- a/sudoku/lib/Alerts.dart +++ b/sudoku/lib/Alerts.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; -import 'main.dart'; +import 'package:sudoku/Styles.dart'; class AlertGameOver extends StatelessWidget { static bool newGame = false; @@ -10,11 +10,18 @@ class AlertGameOver extends StatelessWidget { Widget build(BuildContext context) { return AlertDialog( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), - title: Text('Game Over'), - content: Text('You successfully solved the Sudoku'), + backgroundColor: Styles.bg_2, + title: Text( + 'Game Over', + style: TextStyle(color: Styles.fg), + ), + content: Text( + 'You successfully solved the Sudoku', + style: TextStyle(color: Styles.fg), + ), actions: [ FlatButton( - textColor: MyApp.primaryColor, + textColor: Styles.primaryColor, onPressed: () { Navigator.pop(context); restartGame = true; @@ -22,7 +29,7 @@ class AlertGameOver extends StatelessWidget { child: Text('Restart Game'), ), FlatButton( - textColor: MyApp.primaryColor, + textColor: Styles.primaryColor, onPressed: () { Navigator.pop(context); newGame = true; @@ -72,7 +79,12 @@ class AlertDifficulty extends State { Widget build(BuildContext context) { return SimpleDialog( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), - title: Center(child: Text('Select Difficulty Level')), + title: Center( + child: Text( + 'Select Difficulty Level', + style: TextStyle(color: Styles.fg), + )), + backgroundColor: Styles.bg_2, contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 10), children: [ for (String level in difficulties) @@ -90,8 +102,8 @@ class AlertDifficulty extends State { style: TextStyle( fontSize: 15, color: level == this.currentDifficultyLevel - ? MyApp.primaryColor - : Colors.black)), + ? Styles.primaryColor + : Styles.fg)), ), ], ); @@ -103,18 +115,25 @@ class AlertExit extends StatelessWidget { Widget build(BuildContext context) { return AlertDialog( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), - title: Text('Exit Game'), - content: Text('Are you sure you want to exit the game ?'), + backgroundColor: Styles.bg_2, + title: Text( + 'Exit Game', + style: TextStyle(color: Styles.fg), + ), + content: Text( + 'Are you sure you want to exit the game ?', + style: TextStyle(color: Styles.fg), + ), actions: [ FlatButton( - textColor: MyApp.primaryColor, + textColor: Styles.primaryColor, onPressed: () { Navigator.pop(context); }, child: Text('No'), ), FlatButton( - textColor: MyApp.primaryColor, + textColor: Styles.primaryColor, onPressed: () { SystemNavigator.pop(); }, @@ -159,12 +178,12 @@ class AlertNumbers extends State { Navigator.pop(context); }) }, - color: Colors.white, - textColor: MyApp.primaryColor, + color: Styles.bg_2, + textColor: Styles.primaryColor, highlightColor: Colors.blueAccent, shape: RoundedRectangleBorder( side: BorderSide( - color: Colors.black, + color: Styles.fg, width: 1, style: BorderStyle.solid, ), @@ -199,7 +218,12 @@ class AlertNumbers extends State { Widget build(BuildContext context) { return AlertDialog( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), - title: Center(child: Text('Choose a Number')), + backgroundColor: Styles.bg_2, + title: Center( + child: Text( + 'Choose a Number', + style: TextStyle(color: Styles.fg), + )), content: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, diff --git a/sudoku/lib/Styles.dart b/sudoku/lib/Styles.dart new file mode 100644 index 0000000..636296f --- /dev/null +++ b/sudoku/lib/Styles.dart @@ -0,0 +1,77 @@ +import 'package:flutter/material.dart'; + +class Styles { + // #121212 + static MaterialColor dark = MaterialColor(4279374354, { + 50: Color(0xff7d7d7d), + 100: Color(0xff717171), + 200: Color(0xff595959), + 300: Color(0xff414141), + 400: Color(0xff2a2a2a), + 500: Color(0xff121212), + 600: Color(0xff101010), + 700: Color(0xff0e0e0e), + 800: Color(0xff0d0d0d), + 900: Color(0xff0b0b0b) + }); + + // #FFFFFF + static MaterialColor light = MaterialColor(4294967295, { + 50: Color(0xffffffff), + 100: Color(0xffffffff), + 200: Color(0xffffffff), + 300: Color(0xffffffff), + 400: Color(0xffffffff), + 500: Color(0xffffffff), + 600: Color(0xffe5e5e5), + 700: Color(0xffcccccc), + 800: Color(0xffb2b2b2), + 900: Color(0xff999999) + }); + + // 303030 + static MaterialColor grey = MaterialColor(4281348144, { + 50: Color(0xff8d8d8d), + 100: Color(0xff838383), + 200: Color(0xff6e6e6e), + 300: Color(0xff595959), + 400: Color(0xff454545), + 500: Color(0xff303030), + 600: Color(0xff2b2b2b), + 700: Color(0xff262626), + 800: Color(0xff222222), + 900: Color(0xff1d1d1d) + }); + + // #3880ff + static MaterialColor primaryColor = MaterialColor(4281893119, { + 50: Color(0xff92b9ff), + 100: Color(0xff88b3ff), + 200: Color(0xff74a6ff), + 300: Color(0xff6099ff), + 400: Color(0xff4c8dff), + 500: Color(0xff3880ff), + 600: Color(0xff3273e5), + 700: Color(0xff2d66cc), + 800: Color(0xff275ab2), + 900: Color(0xff224d99) + }); + + // #eb445a + static MaterialColor secondaryColor = MaterialColor(4293608538, { + 50: Color(0xfff498a4), + 100: Color(0xfff38f9c), + 200: Color(0xfff17c8c), + 300: Color(0xffef697b), + 400: Color(0xffed576a), + 500: Color(0xffeb445a), + 600: Color(0xffd33d51), + 700: Color(0xffbc3648), + 800: Color(0xffa4303f), + 900: Color(0xff8d2936) + }); + + static MaterialColor bg = dark; + static MaterialColor bg_2 = grey; + static MaterialColor fg = light; +} diff --git a/sudoku/lib/main.dart b/sudoku/lib/main.dart index 94bcbbf..576f08d 100644 --- a/sudoku/lib/main.dart +++ b/sudoku/lib/main.dart @@ -4,6 +4,7 @@ import 'package:flutter/material.dart'; import 'package:shared_preferences/shared_preferences.dart'; import 'package:flutter_animated_dialog/flutter_animated_dialog.dart'; import 'package:flutter_speed_dial_material_design/flutter_speed_dial_material_design.dart'; +import 'package:sudoku/Styles.dart'; import 'package:sudoku/Alerts.dart'; import 'package:sudoku/Sudoku.dart'; @@ -12,34 +13,6 @@ void main() { } class MyApp extends StatelessWidget { - // #3880ff - static MaterialColor primaryColor = MaterialColor(4281893119, { - 50: Color(0xff92b9ff), - 100: Color(0xff88b3ff), - 200: Color(0xff74a6ff), - 300: Color(0xff6099ff), - 400: Color(0xff4c8dff), - 500: Color(0xff3880ff), - 600: Color(0xff3273e5), - 700: Color(0xff2d66cc), - 800: Color(0xff275ab2), - 900: Color(0xff224d99) - }); - - // #eb445a - static MaterialColor secondaryColor = MaterialColor(4293608538, { - 50: Color(0xfff498a4), - 100: Color(0xfff38f9c), - 200: Color(0xfff17c8c), - 300: Color(0xffef697b), - 400: Color(0xffed576a), - 500: Color(0xffeb445a), - 600: Color(0xffd33d51), - 700: Color(0xffbc3648), - 800: Color(0xffa4303f), - 900: Color(0xff8d2936) - }); - // This widget is the root of your application. @override Widget build(BuildContext context) { @@ -55,7 +28,7 @@ class MyApp extends StatelessWidget { // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. - primarySwatch: primaryColor, + primarySwatch: Styles.primaryColor, ), home: MyHomePage(title: 'Sudoku'), ); @@ -91,6 +64,7 @@ class _MyHomePageState extends State { List> gameCopy; List> gameSolved; static String currentDifficultyLevel; + static String currentTheme; @override void initState() { @@ -98,9 +72,14 @@ class _MyHomePageState extends State { getPrefs().whenComplete(() { if (currentDifficultyLevel == null) { currentDifficultyLevel = 'easy'; - setPrefs(); + setPrefs('currentDifficultyLevel'); + } + if (currentTheme == null) { + currentTheme = 'dark'; + setPrefs('currentTheme'); } newGame(currentDifficultyLevel); + changeTheme('set'); }); } @@ -108,12 +87,52 @@ class _MyHomePageState extends State { final prefs = await SharedPreferences.getInstance(); setState(() { currentDifficultyLevel = prefs.getString('currentDifficultyLevel'); + currentTheme = prefs.getString('currentTheme'); }); } - setPrefs() async { + setPrefs(String property) async { final prefs = await SharedPreferences.getInstance(); - prefs.setString('currentDifficultyLevel', currentDifficultyLevel); + if (property == 'currentDifficultyLevel') { + prefs.setString('currentDifficultyLevel', currentDifficultyLevel); + } else if (property == 'currentTheme') { + prefs.setString('currentTheme', currentTheme); + } + } + + void changeTheme(String mode) { + setState(() { + if (currentTheme == 'light') { + if (mode == 'switch') { + Styles.bg = Styles.dark; + Styles.bg_2 = Styles.grey; + Styles.fg = Styles.light; + currentTheme = 'dark'; + } else if (mode == 'set') { + Styles.bg = Styles.light; + Styles.bg_2 = Styles.light; + Styles.fg = Styles.dark; + } + } else if (currentTheme == 'dark') { + if (mode == 'switch') { + Styles.bg = Styles.light; + Styles.bg_2 = Styles.light; + Styles.fg = Styles.dark; + currentTheme = 'light'; + } else if (mode == 'set') { + Styles.bg = Styles.dark; + Styles.bg_2 = Styles.grey; + Styles.fg = Styles.light; + } + } + setPrefs('currentTheme'); + isFABDisabled = true; + }); + Timer(Duration(milliseconds: 300), () { + setState(() { + isFABDisabled = false; + }); + }); } void checkResult() { @@ -145,7 +164,6 @@ class _MyHomePageState extends State { } } - // ignore: missing_return static List>> getNewGame([String difficulty = 'easy']) { Sudoku object = new Sudoku(difficulty); return [object.newSudoku, object.newSudokuSolved]; @@ -193,15 +211,18 @@ class _MyHomePageState extends State { Color buttonColor(int k, int i) { Color color; - if ([0, 1, 2].contains(k) && [3, 4, 5].contains(i)) { - color = Colors.grey[300]; - } else if ([3, 4, 5].contains(k) && [0, 1, 2, 6, 7, 8].contains(i)) { - color = Colors.grey[300]; - } else if ([6, 7, 8].contains(k) && [3, 4, 5].contains(i)) { - color = Colors.grey[300]; + if (([0, 1, 2].contains(k) && [3, 4, 5].contains(i)) || + ([3, 4, 5].contains(k) && [0, 1, 2, 6, 7, 8].contains(i)) || + ([6, 7, 8].contains(k) && [3, 4, 5].contains(i))) { + if (Styles.bg == Styles.dark) { + color = Styles.grey; + } else { + color = Colors.grey[300]; + } } else { - color = Colors.white; + color = Styles.bg; } + return color; } @@ -212,9 +233,9 @@ class _MyHomePageState extends State { } MaterialColor emptyColor; if (gameOver) { - emptyColor = MyApp.primaryColor; + emptyColor = Styles.primaryColor; } else { - emptyColor = MyApp.secondaryColor; + emptyColor = Styles.secondaryColor; } List buttonList = new List(9); for (var i = 0; i <= 8; i++) { @@ -243,13 +264,14 @@ class _MyHomePageState extends State { }); }, color: buttonColor(k, i), - textColor: game[k][i] == 0 ? buttonColor(k, i) : MyApp.secondaryColor, + textColor: + game[k][i] == 0 ? buttonColor(k, i) : Styles.secondaryColor, disabledColor: buttonColor(k, i), - disabledTextColor: gameCopy[k][i] == 0 ? emptyColor : Colors.black, + disabledTextColor: gameCopy[k][i] == 0 ? emptyColor : Styles.fg, highlightColor: Colors.blueAccent, shape: RoundedRectangleBorder( side: BorderSide( - color: Colors.black, + color: Styles.fg, width: 1, style: BorderStyle.solid, ), @@ -302,21 +324,31 @@ class _MyHomePageState extends State { SpeedDialController speedDialController = SpeedDialController(); Widget buildFloatingActionButton() { - final TextStyle customStyle = - TextStyle(inherit: false, color: Colors.black); + final TextStyle customStyle = TextStyle( + inherit: false, + //color: Styles.fg + color: Colors.black); final icons = [ SpeedDialAction( + backgroundColor: Styles.bg_2, child: Icon(Icons.refresh), label: Text('Restart Game', style: customStyle)), SpeedDialAction( + backgroundColor: Styles.bg_2, child: Icon(Icons.add_rounded), label: Text('New Game', style: customStyle)), SpeedDialAction( + backgroundColor: Styles.bg_2, child: Icon(Icons.lightbulb_outline_rounded), label: Text('Show Solution', style: customStyle)), SpeedDialAction( + backgroundColor: Styles.bg_2, child: Icon(Icons.build_outlined), label: Text('Set Difficulty', style: customStyle)), + SpeedDialAction( + backgroundColor: Styles.bg_2, + child: Icon(Icons.invert_colors_on_rounded), + label: Text('Switch Theme', style: customStyle)), ]; return SpeedDialFloatingActionButton( @@ -328,8 +360,10 @@ class _MyHomePageState extends State { onAction: onSpeedDialAction, controller: speedDialController, isDismissible: true, - backgroundColor: MyApp.primaryColor, - foregroundColor: Colors.white, + backgroundColor: Styles.primaryColor, + foregroundColor: Styles.bg, + //labelBackgroundColor: Styles.bg_2, + //labelShadowColor: Colors.grey.withOpacity(0.1), ); } @@ -379,7 +413,7 @@ class _MyHomePageState extends State { newGame(AlertDifficultyState.difficulty); currentDifficultyLevel = AlertDifficultyState.difficulty; AlertDifficultyState.difficulty = null; - setPrefs(); + setPrefs('currentDifficultyLevel'); }); } setState(() { @@ -389,6 +423,15 @@ class _MyHomePageState extends State { }); } break; + case 4: + { + speedDialController.unfold(); + Timer(Duration(milliseconds: 300), () { + changeTheme('switch'); + setPrefs('currentTheme'); + }); + } + break; } } @@ -422,7 +465,7 @@ class _MyHomePageState extends State { return true; }, child: new Scaffold( - backgroundColor: Colors.white, + backgroundColor: Styles.bg, appBar: AppBar( centerTitle: true, // Here we take the value from the MyHomePage object that was created by @@ -457,8 +500,8 @@ class _MyHomePageState extends State { : FloatingActionButton( onPressed: null, child: Icon(Icons.menu_rounded), - foregroundColor: Colors.white, - backgroundColor: MyApp.primaryColor, + foregroundColor: Styles.bg, + backgroundColor: Styles.primaryColor, ), )); }