My submission

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!
+
+<img src="https://user-images.githubusercontent.com/53489549/114847048-e5ef9280-9dfa-11eb-95c0-acc384849334.png" width="300">  <img src="https://user-images.githubusercontent.com/53489549/114847081-ee47cd80-9dfa-11eb-8d02-03a417a9cb35.png" width="300">  <img src="https://user-images.githubusercontent.com/53489549/114847086-f142be00-9dfa-11eb-9bd8-21f37b9eed95.png" width="300">
+
+# App In Action!
+<img src="https://user-images.githubusercontent.com/53489549/114849456-631c0700-9dfd-11eb-990c-3efba0aca89d.gif" width="300">
+
+
+
+
+

lib/scenery.dart

@@ -22,19 +22,26 @@ class _SceneryState extends State<Scenery> {
         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(),
           ),
           //todo(you) - Can you find a way to toggle this text area background color according to the theme?
           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<Scenery> {
             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<Scenery> {
                         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<Scenery> {
                         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<Scenery> {
                         title: const Text('Other'),
                         groupValue: myTheme.themeType,
                         value: ThemeType.Other,
-                        onChanged: (ThemeType? mode) => myTheme.setThemeType(ThemeType.Other),
+                        onChanged: (ThemeType? mode) =>
+                            myTheme.setThemeType(ThemeType.Other),
                       ),
                     ),
                   ],

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,
         );

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))));
     }
   }
 }