diff --git a/Images/Custom.png b/Images/Custom.png new file mode 100644 index 0000000..76e0dd1 Binary files /dev/null and b/Images/Custom.png differ diff --git a/Images/dark.png b/Images/dark.png new file mode 100644 index 0000000..0d514d0 Binary files /dev/null and b/Images/dark.png differ diff --git a/Images/light.png b/Images/light.png new file mode 100644 index 0000000..10a9771 Binary files /dev/null and b/Images/light.png differ diff --git a/README.md b/README.md index bccd64a..6b7fede 100644 --- a/README.md +++ b/README.md @@ -31,3 +31,15 @@ Your Challenge is to make this screen more interesting with custom themeing. A c - Not required, but encouraged: theming, as above, for the third theme as well. That's it! Good luck :) + +## App Screenshots! + + + +# App In Action! + + + + + + diff --git a/lib/scenery.dart b/lib/scenery.dart index 9c5c180..3868913 100644 --- a/lib/scenery.dart +++ b/lib/scenery.dart @@ -22,12 +22,18 @@ class _SceneryState extends State { children: [ CustomPaint( foregroundPainter: SceneryPainter( - skyColor: CustomWidgetThemes.of(context).sceneryThemeData!.skyFillColor, - waterColor: CustomWidgetThemes.of(context).sceneryThemeData!.waterFillColor, - mountainColor: CustomWidgetThemes.of(context).sceneryThemeData!.mountainFillColor, + skyColor: + CustomWidgetThemes.of(context).sceneryThemeData!.skyFillColor, + waterColor: CustomWidgetThemes.of(context) + .sceneryThemeData! + .waterFillColor, + mountainColor: CustomWidgetThemes.of(context) + .sceneryThemeData! + .mountainFillColor, textHeight: _textAreaHeight, drawSun: CustomWidgetThemes.of(context).sceneryThemeData!.drawSun, - drawMoon: CustomWidgetThemes.of(context).sceneryThemeData!.drawMoon, + drawMoon: + CustomWidgetThemes.of(context).sceneryThemeData!.drawMoon, ), child: Container(), ), @@ -35,6 +41,7 @@ class _SceneryState extends State { Positioned( bottom: 0, child: Container( + color: myTheme.currentThemeData.primaryColorLight, height: _textAreaHeight, width: constraints.maxWidth, child: const SomeText(), @@ -45,6 +52,7 @@ class _SceneryState extends State { right: 0, child: Container( width: constraints.maxWidth, + color: myTheme.currentThemeData.primaryColor, child: Padding( padding: const EdgeInsets.all(8.0), child: Row( @@ -56,7 +64,8 @@ class _SceneryState extends State { title: const Text('Light'), groupValue: myTheme.themeType, value: ThemeType.Light, - onChanged: (ThemeType? mode) => myTheme.setThemeType(ThemeType.Light), + onChanged: (ThemeType? mode) => + myTheme.setThemeType(ThemeType.Light), ), ), Expanded( @@ -65,7 +74,8 @@ class _SceneryState extends State { title: const Text('Dark'), groupValue: myTheme.themeType, value: ThemeType.Dark, - onChanged: (ThemeType? mode) => myTheme.setThemeType(ThemeType.Dark), + onChanged: (ThemeType? mode) => + myTheme.setThemeType(ThemeType.Dark), ), ), Expanded( @@ -74,7 +84,8 @@ class _SceneryState extends State { title: const Text('Other'), groupValue: myTheme.themeType, value: ThemeType.Other, - onChanged: (ThemeType? mode) => myTheme.setThemeType(ThemeType.Other), + onChanged: (ThemeType? mode) => + myTheme.setThemeType(ThemeType.Other), ), ), ], diff --git a/lib/themes/custom_themes.dart b/lib/themes/custom_themes.dart index 102fc3d..8e3442f 100644 --- a/lib/themes/custom_themes.dart +++ b/lib/themes/custom_themes.dart @@ -7,7 +7,8 @@ import 'scenery_theme.dart'; /// You can add themes for your own custom widgets here. /// NB: for this challenge, it is only required to modify sceneryThemeData class CustomWidgetThemes { - static CustomWidgetThemes of(BuildContext context) => CustomWidgetThemes._(context); + static CustomWidgetThemes of(BuildContext context) => + CustomWidgetThemes._(context); SceneryThemeData? sceneryThemeData; @@ -19,27 +20,27 @@ class CustomWidgetThemes { switch (themeType) { case ThemeType.Light: sceneryThemeData = SceneryThemeData( - skyFillColor: Colors.grey, - mountainFillColor: Colors.blueGrey, - waterFillColor: Colors.blueGrey[800]!, + skyFillColor: Colors.orangeAccent[200]!, + mountainFillColor: Colors.brown, + waterFillColor: Colors.lightBlue.shade300, drawMoon: false, drawSun: true, ); break; case ThemeType.Dark: sceneryThemeData = SceneryThemeData( - skyFillColor: Colors.grey, - mountainFillColor: Colors.blueGrey, - waterFillColor: Colors.blueGrey[800]!, + skyFillColor: Colors.grey[800]!, + mountainFillColor: Colors.redAccent, + waterFillColor: Colors.blueGrey[200]!, drawMoon: true, drawSun: false, ); break; case ThemeType.Other: sceneryThemeData = SceneryThemeData( - skyFillColor: Colors.grey, - mountainFillColor: Colors.blueGrey, - waterFillColor: Colors.blueGrey[800]!, + skyFillColor: Colors.pink[900]!, + mountainFillColor: Colors.purple[300]!, + waterFillColor: Colors.pinkAccent, drawMoon: true, drawSun: true, ); diff --git a/lib/themes/my_theme.dart b/lib/themes/my_theme.dart index a3c4b6f..f3ec07b 100644 --- a/lib/themes/my_theme.dart +++ b/lib/themes/my_theme.dart @@ -29,11 +29,40 @@ class MyTheme with ChangeNotifier { ThemeData get currentThemeData { switch (themeType) { case ThemeType.Light: - return ThemeData(); + return ThemeData( + primaryColor: Colors.lime, + primaryColorLight: Color(0xff96cdf0), + accentColor: Color(0xff182628), + backgroundColor: Color(0xff3b945e), + textTheme: TextTheme( + headline3: TextStyle( + color: Color(0xff0E1132), fontWeight: FontWeight.bold), + subtitle1: TextStyle( + color: Color(0xff0E1132), fontWeight: FontWeight.w600), + bodyText1: TextStyle(color: Color(0xff04396C)))); case ThemeType.Dark: - return ThemeData(); + return ThemeData( + primaryColor: Color(0xff10282d), + primaryColorLight: Color(0xff4E4E50), + accentColor: Color(0xffe1f1f4), + backgroundColor: Color(0xff182628), + textTheme: TextTheme( + headline3: TextStyle( + color: Color(0xffffffff), fontWeight: FontWeight.bold), + subtitle1: TextStyle( + color: Color(0xffffffff), fontWeight: FontWeight.w600), + bodyText1: TextStyle(color: Color(0xebEDF5E0)))); case ThemeType.Other: - return ThemeData(); + return ThemeData( + primaryColor: Colors.pink[100], + primaryColorLight: Colors.deepPurpleAccent[100], + accentColor: Color(0xff2a1b3d), + textTheme: TextTheme( + headline3: TextStyle( + color: Color(0xff25274D), fontWeight: FontWeight.bold), + subtitle1: TextStyle( + color: Color(0xff25274D), fontWeight: FontWeight.w600), + bodyText1: TextStyle(color: Color(0xff24315E)))); } } }