feat: introducing dark mode

.github/workflows/development.yml

@@ -51,7 +51,7 @@ jobs:
       - name: Setup Flutter
         uses: subosito/flutter-action@v2
         with:
-          flutter-version: '3.0.3'
+          flutter-version: '3.3.10'
           channel: "stable" # or: 'dev' or 'beta'
 
       - name: Prepare & Build

.github/workflows/release_trigger.yml

@@ -57,7 +57,7 @@ jobs:
       - name: Setup Flutter
         uses: subosito/flutter-action@v2
         with:
-          flutter-version: '3.0.3'
+          flutter-version: '3.3.10'
           channel: "stable" # or: 'dev' or 'beta'
 
       - name: Prepare & Build

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,5 @@
-#Fri Jun 23 08:50:38 CEST 2017
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-zipStoreBase=GRADLE_USER_HOME
-zipStorePath=wrapper/dists
 distributionUrl=https\://services.gradle.org/distributions/gradle-7.6-all.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

lib/components/autocomplete_item.dart

@@ -10,7 +10,7 @@ class AutocompleteItem extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Card(
-      color: lighterGrey,
+      color: backgroundColorLightMode2,
       child: ListTile(
         title: Text(text),
         onTap: onClick,

lib/components/bottom_bar.dart

@@ -12,6 +12,7 @@ class BottomBar extends StatelessWidget {
   final Track track;
   final AudioPlayer audioPlayer;
   final Duration currentAudioPosition;
+  final Color backgroundColor;
 
   BottomBar({
     this.playPause,
@@ -21,6 +22,7 @@ class BottomBar extends StatelessWidget {
     this.track,
     this.audioPlayer,
     this.currentAudioPosition,
+    this.backgroundColor,
   });
 
   String printDuration() {
@@ -39,7 +41,7 @@ class BottomBar extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      color: lighterGrey,
+      color: backgroundColor,
       width: MediaQuery.of(context).size.width * 1,
       height: 65,
       child: Row(
@@ -55,6 +57,7 @@ class BottomBar extends StatelessWidget {
                     child: SmallButton(
                       autoFocus: false,
                       icon: Icon(Icons.fast_rewind),
+                      color: primaryOrange,
                       onClick: track != null ? backward : null,
                     ),
                   ),
@@ -64,20 +67,23 @@ class BottomBar extends StatelessWidget {
                       icon: Icon(audioPlayer.state != PlayerState.playing
                           ? Icons.play_arrow
                           : Icons.pause),
+                      color: primaryOrange,
                       onClick: track != null ? playPause : null,
                     ),
                   ),
                   Expanded(
                     child: SmallButton(
                       autoFocus: false,
                       icon: Icon(Icons.fast_forward),
+                      color: primaryOrange,
                       onClick: track != null ? forward : null,
                     ),
                   ),
                   Expanded(
                     child: SmallButton(
                       autoFocus: false,
                       icon: Icon(Icons.stop),
+                      color: primaryOrange,
                       onClick: stop,
                     ),
                   ),

lib/components/input_area.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_spinkit/flutter_spinkit.dart';
 import 'package:sound_on_fire/components/autocomplete_item.dart';
 import 'package:sound_on_fire/components/keyboard.dart';
+import 'package:sound_on_fire/components/small_button.dart';
 import 'package:sound_on_fire/util/constants.dart';
 
 class InputArea extends StatelessWidget {
@@ -10,12 +11,16 @@ class InputArea extends StatelessWidget {
     @required this.onKeyboardAction,
     @required this.isAlphabeticalKeyboard,
     @required this.isLoading,
+    @required this.isDarkModeEnabled,
+    @required this.toggleDarkMode,
   });
 
   final List<AutocompleteItem> autocompleteItems;
   final Function onKeyboardAction;
   final bool isAlphabeticalKeyboard;
   final bool isLoading;
+  final bool isDarkModeEnabled;
+  final Function toggleDarkMode;
 
   @override
   Widget build(BuildContext context) {
@@ -48,6 +53,13 @@ class InputArea extends StatelessWidget {
                 Image(
                   image: AssetImage('images/pb_soundcloud2.png'),
                 ),
+                SizedBox(height: 3),
+                SmallButton(
+                  text: isDarkModeEnabled ? "LIGHT" : "DARK",
+                  icon: isDarkModeEnabled ? Icon(Icons.light_mode_sharp) : Icon(Icons.dark_mode_sharp),
+                  onClick: () => this.toggleDarkMode(),
+                  border: true,
+                ),
                 SizedBox(height: 10),
                 isLoading
                     ? SpinKitDualRing(

lib/components/main_area.dart

@@ -12,6 +12,8 @@ class MainArea extends StatelessWidget {
     @required ScrollController scrollController,
     @required this.trackTiles,
     @required this.isLoading,
+    @required this.isDarkModeEnabled,
+    @required this.toggleDarkMode,
   }) : _scrollController = scrollController;
 
   final List<AutocompleteItem> autocompleteItems;
@@ -20,6 +22,8 @@ class MainArea extends StatelessWidget {
   final ScrollController _scrollController;
   final List<TrackTile> trackTiles;
   final bool isLoading;
+  final bool isDarkModeEnabled;
+  final Function toggleDarkMode;
 
   @override
   Widget build(BuildContext context) {
@@ -35,6 +39,8 @@ class MainArea extends StatelessWidget {
               onKeyboardAction: onKeyboardAction,
               isAlphabeticalKeyboard: isAlphabeticalKeyboard,
               isLoading: isLoading,
+              isDarkModeEnabled: isDarkModeEnabled,
+              toggleDarkMode: toggleDarkMode,
             ),
             ResultArea(
               scrollController: _scrollController,

lib/components/small_button.dart

@@ -7,35 +7,43 @@ class SmallButton extends StatelessWidget {
   final Icon icon;
   final bool autoFocus;
   final bool border;
+  final Color color;
 
   const SmallButton({
     this.text,
     this.onClick,
     this.icon,
     this.autoFocus = false,
     this.border = false,
+    this.color = Colors.black,
   });
 
   @override
   Widget build(BuildContext context) {
-    return ButtonTheme(
-      height: 35,
-      minWidth: 40,
-      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
-      child: FlatButton(
-        shape: border
+    return TextButtonTheme(
+      data: TextButtonThemeData(
+        style: TextButton.styleFrom(
+          minimumSize: Size(40, 35),
+          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+          padding: EdgeInsets.symmetric(horizontal: 5),
+          foregroundColor: color,
+          shape: border 
             ? RoundedRectangleBorder(
                 side: BorderSide(
-                    color: Colors.grey[300],
-                    width: 1,
-                    style: BorderStyle.solid),
-                borderRadius: BorderRadius.circular(10),
+                  color: Colors.grey[300],
+                  width: 1,
+                  style: BorderStyle.solid
+                ),
+                borderRadius: BorderRadius.all(Radius.circular(10)),
               )
             : null,
-        padding: EdgeInsets.symmetric(horizontal: 5),
-        child: icon != null ? icon : Text(text),
+        ),
+      ),
+      child: TextButton(
+        // style: flatButtonStyle,
         onPressed: onClick,
         autofocus: autoFocus,
+        child: icon != null ? icon : Text(text),
       ),
     );
   }

lib/screens/home.dart

@@ -26,6 +26,9 @@ class _HomeScreenState extends State<HomeScreen> with WidgetsBindingObserver {
   static AudioPlayer audioPlayer;
 
   bool isLoading = false;
+  bool isDarkModeEnabled = false;
+  Color backgroundColor1 = backgroundColorLightMode1;
+  Color backgroundColor2 = backgroundColorLightMode2;
   int searchLimit = 10;
   int amountCorruptTracks = 0;
   String searchQuery = "";
@@ -314,10 +317,22 @@ class _HomeScreenState extends State<HomeScreen> with WidgetsBindingObserver {
     }
   }
 
+  void toggleDarkMode() {
+    print(isDarkModeEnabled);
+    if (isDarkModeEnabled) {
+      print("light");
+    } else print("dark");
+    setState(() {
+      isDarkModeEnabled = !isDarkModeEnabled;
+      backgroundColor1 = isDarkModeEnabled ? backgroundColorDarkMode1 : backgroundColorLightMode1;
+      backgroundColor2 = isDarkModeEnabled ? backgroundColorDarkMode2 : backgroundColorLightMode2;
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: lightGrey,
+      backgroundColor: backgroundColor1,
       body: RawKeyboardListener(
         focusNode: FocusNode(skipTraversal: true),
         onKey: _handleHardKeyEvents,
@@ -336,8 +351,11 @@ class _HomeScreenState extends State<HomeScreen> with WidgetsBindingObserver {
                 scrollController: _scrollController,
                 trackTiles: trackTiles,
                 isLoading: isLoading,
+                isDarkModeEnabled: isDarkModeEnabled,
+                toggleDarkMode: toggleDarkMode,
               ),
               BottomBar(
+                backgroundColor: backgroundColor2,
                 playPause: playPause,
                 backward: fastRewind,
                 forward: fastForward,

lib/screens/loading.dart

@@ -54,7 +54,7 @@ class _LoadingScreenState extends State<LoadingScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: lightGrey,
+      backgroundColor: backgroundColorLightMode1,
       body: Center(
         child: Column(
           children: <Widget>[

lib/util/constants.dart

@@ -29,8 +29,10 @@ const MaterialColor primaryMaterialColor = const MaterialColor(
   },
 );
 const primaryOrange = Color(0xffff5500);
-var lightGrey = Colors.grey[200];
-var lighterGrey = Colors.grey[100];
+var backgroundColorLightMode1 = Colors.grey[200];
+var backgroundColorLightMode2 = Colors.grey[100];
+var backgroundColorDarkMode1 = Colors.black;
+var backgroundColorDarkMode2 = Colors.black12;
 const soundCloudHost = "https://soundcloud.com";
 const soundCloudApiHost = "https://api-v2.soundcloud.com";