Blur effect applied in Lyrics, PlayerView & PlayerOverlay

Drag to scroll support for Playlist Categories
Sidebar user name & settings icon moved down

lib/components/Category/CategoryCard.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart' hide Page;
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -65,14 +66,23 @@ class CategoryCard extends HookConsumerWidget {
             ? const Text("Something Went Wrong")
             : SizedBox(
                 height: 245,
+                child: ScrollConfiguration(
+                  behavior: ScrollConfiguration.of(context).copyWith(
+                    dragDevices: {
+                      PointerDeviceKind.touch,
+                      PointerDeviceKind.mouse,
+                    },
+                  ),
                   child: Scrollbar(
                     controller: scrollController,
+                    interactive: false,
                     child: PagedListView<int, PlaylistSimple>(
                       shrinkWrap: true,
                       pagingController: pagingController,
                       scrollController: scrollController,
                       scrollDirection: Axis.horizontal,
-                    builderDelegate: PagedChildBuilderDelegate<PlaylistSimple>(
+                      builderDelegate:
+                          PagedChildBuilderDelegate<PlaylistSimple>(
                         noItemsFoundIndicatorBuilder: (context) {
                           return const NotFound();
                         },
@@ -88,7 +98,8 @@ class CategoryCard extends HookConsumerWidget {
                       ),
                     ),
                   ),
-              )
+                ),
+              ),
       ],
     );
   }

lib/components/Home/Home.dart

@@ -74,9 +74,11 @@ class Home extends HookConsumerWidget {
                 if (!Platform.isMacOS && !kIsMobile)
                   const TitleBarActionButtons(),
               ],
-            ))
+            ),
+          )
         ],
-        ));
+      ),
+    );
 
     final backgroundColor = Theme.of(context).backgroundColor;
 
@@ -96,6 +98,7 @@ class Home extends HookConsumerWidget {
       child: Scaffold(
         body: Column(
           children: [
+            if (_selectedIndex.value != 3)
               kIsMobile
                   ? titleBarContents
                   : WindowTitleBarBox(child: titleBarContents),
@@ -110,7 +113,11 @@ class Home extends HookConsumerWidget {
                   if (_selectedIndex.value == 0)
                     Expanded(
                       child: Padding(
-                        padding: const EdgeInsets.all(8.0),
+                        padding: const EdgeInsets.only(
+                          bottom: 8.0,
+                          top: 8.0,
+                          left: 8.0,
+                        ),
                         child: HookBuilder(builder: (context) {
                           final pagingController = usePaginatedFutureProvider<
                               Page<Category>, int, Category>(

lib/components/Home/Sidebar.dart

@@ -1,9 +1,11 @@
+import 'package:bitsdojo_window/bitsdojo_window.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:flutter/material.dart';
 import 'package:spotube/helpers/image-to-url-string.dart';
+import 'package:spotube/hooks/useBreakpointValue.dart';
 import 'package:spotube/hooks/useBreakpoints.dart';
 import 'package:spotube/models/sideBarTiles.dart';
 import 'package:spotube/provider/SpotifyRequests.dart';
@@ -37,6 +39,14 @@ class Sidebar extends HookConsumerWidget {
     final extended = useState(false);
     final meSnapshot = ref.watch(currentUserQuery);
 
+    final int titleBarDragMaxWidth = useBreakpointValue(
+      md: 80,
+      lg: 256,
+      sm: 0,
+      xl: 0,
+      xxl: 0,
+    );
+
     useEffect(() {
       if (breakpoints.isMd && extended.value) {
         extended.value = false;
@@ -47,7 +57,32 @@ class Sidebar extends HookConsumerWidget {
       return null;
     });
 
-    return NavigationRail(
+    return Material(
+      color: Theme.of(context).navigationRailTheme.backgroundColor,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          if (selectedIndex == 3)
+            SizedBox(
+              height: appWindow.titleBarHeight,
+              width: titleBarDragMaxWidth.toDouble(),
+              child: MoveWindow(),
+            ),
+          extended.value
+              ? Padding(
+                  padding: const EdgeInsets.only(left: 15),
+                  child: Row(children: [
+                    _buildSmallLogo(),
+                    const SizedBox(
+                      width: 10,
+                    ),
+                    Text("Spotube",
+                        style: Theme.of(context).textTheme.headline4),
+                  ]),
+                )
+              : _buildSmallLogo(),
+          Expanded(
+            child: NavigationRail(
               destinations: sidebarTileList
                   .map(
                     (e) => NavigationRailDestination(
@@ -65,24 +100,16 @@ class Sidebar extends HookConsumerWidget {
               selectedIndex: selectedIndex,
               onDestinationSelected: onSelectedIndexChanged,
               extended: extended.value,
-      leading: extended.value
-          ? Padding(
-              padding: const EdgeInsets.only(left: 15),
-              child: Row(children: [
-                _buildSmallLogo(),
-                const SizedBox(
-                  width: 10,
             ),
-                Text("Spotube", style: Theme.of(context).textTheme.headline4),
+          ),
-              ]),
+          SizedBox(
-            )
+            width: titleBarDragMaxWidth.toDouble(),
-          : _buildSmallLogo(),
+            child: meSnapshot.when(
-      trailing: meSnapshot.when(
               data: (data) {
                 final avatarImg = imageToUrlString(data.images,
                     index: (data.images?.length ?? 1) - 1);
-          return extended.value
+                if (extended.value) {
-              ? Padding(
+                  return Padding(
                       padding: const EdgeInsets.all(16),
                       child: Row(
                         mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -106,17 +133,25 @@ class Sidebar extends HookConsumerWidget {
                               icon: const Icon(Icons.settings_outlined),
                               onPressed: () => goToSettings(context)),
                         ],
-                  ))
+                      ));
-              : InkWell(
+                } else {
+                  return Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: InkWell(
                       onTap: () => goToSettings(context),
                       child: CircleAvatar(
                         backgroundImage: CachedNetworkImageProvider(avatarImg),
                       ),
+                    ),
                   );
+                }
               },
               error: (e, _) => Text("Error $e"),
               loading: () => const CircularProgressIndicator(),
             ),
+          )
+        ],
+      ),
     );
   }
 }

lib/components/Lyrics/Lyrics.dart

@@ -2,13 +2,18 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/LoaderShimmers/ShimmerLyrics.dart';
+import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 import 'package:spotube/helpers/artist-to-string.dart';
 import 'package:spotube/hooks/useBreakpoints.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:spotube/provider/SpotifyRequests.dart';
 
 class Lyrics extends HookConsumerWidget {
-  const Lyrics({Key? key}) : super(key: key);
+  final Color? titleBarForegroundColor;
+  const Lyrics({
+    required this.titleBarForegroundColor,
+    Key? key,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context, ref) {
@@ -17,10 +22,10 @@ class Lyrics extends HookConsumerWidget {
     final breakpoint = useBreakpoints();
     final textTheme = Theme.of(context).textTheme;
 
-    return Expanded(
+    return Column(
-      child: Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
+        PageWindowTitleBar(foregroundColor: titleBarForegroundColor),
         Center(
           child: Text(
             playback.track?.name ?? "",
@@ -68,7 +73,6 @@ class Lyrics extends HookConsumerWidget {
           ),
         )
       ],
-      ),
     );
   }
 }

lib/components/Lyrics/SyncedLyrics.dart

@@ -1,13 +1,20 @@
+import 'dart:ui';
+
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:palette_generator/palette_generator.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/LoaderShimmers/ShimmerLyrics.dart';
 import 'package:spotube/components/Lyrics/Lyrics.dart';
+import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 import 'package:spotube/components/Shared/SpotubeMarqueeText.dart';
 import 'package:spotube/helpers/artist-to-string.dart';
+import 'package:spotube/helpers/image-to-url-string.dart';
 import 'package:spotube/hooks/useAutoScrollController.dart';
 import 'package:spotube/hooks/useBreakpoints.dart';
+import 'package:spotube/hooks/usePaletteColor.dart';
 import 'package:spotube/hooks/useSyncedLyrics.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:scroll_to_index/scroll_to_index.dart';
@@ -88,14 +95,44 @@ class SyncedLyrics extends HookConsumerWidget {
     }, [lyricValue]);
 
     // when synced lyrics not found, fallback to GeniusLyrics
-    if (failed.value) return const Lyrics();
 
-    final headlineTextStyle = breakpoint >= Breakpoints.md
+    String albumArt = useMemoized(
+      () => imageToUrlString(
+        playback.track?.album?.images,
+        index: (playback.track?.album?.images?.length ?? 1) - 1,
+      ),
+      [playback.track?.album?.images],
+    );
+    final palette = usePaletteColor(albumArt, ref);
+
+    final headlineTextStyle = (breakpoint >= Breakpoints.md
             ? textTheme.headline3
-        : textTheme.headline4?.copyWith(fontSize: 25);
+            : textTheme.headline4?.copyWith(fontSize: 25))
+        ?.copyWith(color: palette.titleTextColor);
+
     return Expanded(
-      child: Column(
+      child: Container(
+        clipBehavior: Clip.hardEdge,
+        decoration: BoxDecoration(
+          image: DecorationImage(
+            image: CachedNetworkImageProvider(
+              albumArt,
+              cacheKey: albumArt,
+            ),
+            fit: BoxFit.cover,
+          ),
+        ),
+        child: BackdropFilter(
+          filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
+          child: Container(
+            color: palette.color.withOpacity(.7),
+            child: failed.value
+                ? Lyrics(titleBarForegroundColor: palette.bodyTextColor)
+                : Column(
                     children: [
+                      PageWindowTitleBar(
+                        foregroundColor: palette.bodyTextColor,
+                      ),
                       Center(
                           child: SizedBox(
                         height: breakpoint >= Breakpoints.md ? 50 : 30,
@@ -112,7 +149,8 @@ class SyncedLyrics extends HookConsumerWidget {
                       )),
                       Center(
                         child: Text(
-              artistsToString<Artist>(playback.track?.artists ?? []),
+                          artistsToString<Artist>(
+                              playback.track?.artists ?? []),
                           style: breakpoint >= Breakpoints.md
                               ? textTheme.headline5
                               : textTheme.headline6,
@@ -125,7 +163,8 @@ class SyncedLyrics extends HookConsumerWidget {
                             itemCount: lyricValue.lyrics.length,
                             itemBuilder: (context, index) {
                               final lyricSlice = lyricValue.lyrics[index];
-                  final isActive = lyricSlice.time.inSeconds == currentTime;
+                              final isActive =
+                                  lyricSlice.time.inSeconds == currentTime;
                               if (isActive) {
                                 controller.scrollToIndex(
                                   index,
@@ -145,8 +184,9 @@ class SyncedLyrics extends HookConsumerWidget {
                                         // indicating the active state of that lyric slice
                                         color: isActive
                                             ? Theme.of(context).primaryColor
-                                : null,
+                                            : palette.bodyTextColor,
-                            fontWeight: isActive ? FontWeight.bold : null,
+                                        fontWeight:
+                                            isActive ? FontWeight.bold : null,
                                         fontSize: 30,
                                       ),
                                       textAlign: TextAlign.center,
@@ -158,10 +198,14 @@ class SyncedLyrics extends HookConsumerWidget {
                           ),
                         ),
                       if (playback.track != null &&
-              (lyricValue == null || lyricValue.lyrics.isEmpty == true))
+                          (lyricValue == null ||
+                              lyricValue.lyrics.isEmpty == true))
                         const Expanded(child: ShimmerLyrics()),
                     ],
                   ),
+          ),
+        ),
+      ),
     );
   }
 }

lib/components/Player/PlayerActions.dart

@@ -13,8 +13,10 @@ import 'package:spotube/provider/SpotifyRequests.dart';
 
 class PlayerActions extends HookConsumerWidget {
   final MainAxisAlignment mainAxisAlignment;
+  final bool floatingQueue;
   PlayerActions({
     this.mainAxisAlignment = MainAxisAlignment.center,
+    this.floatingQueue = true,
     Key? key,
   }) : super(key: key);
   final logger = getLogger(PlayerActions);
@@ -37,7 +39,8 @@ class PlayerActions extends HookConsumerWidget {
                     isDismissible: true,
                     enableDrag: true,
                     isScrollControlled: true,
-                    backgroundColor: Colors.transparent,
+                    backgroundColor: Colors.black12,
+                    barrierColor: Colors.black12,
                     shape: RoundedRectangleBorder(
                       borderRadius: BorderRadius.circular(10),
                     ),
@@ -45,7 +48,7 @@ class PlayerActions extends HookConsumerWidget {
                       maxHeight: MediaQuery.of(context).size.height * .7,
                     ),
                     builder: (context) {
-                      return const PlayerQueue();
+                      return PlayerQueue(floating: floatingQueue);
                     },
                   );
                 }

lib/components/Player/PlayerControls.dart

@@ -8,6 +8,7 @@ import 'package:spotube/provider/Playback.dart';
 
 class PlayerControls extends HookConsumerWidget {
   final Color? iconColor;
+
   PlayerControls({
     this.iconColor,
     Key? key,

lib/components/Player/PlayerOverlay.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -20,7 +22,7 @@ class PlayerOverlay extends HookConsumerWidget {
   Widget build(BuildContext context, ref) {
     final breakpoint = useBreakpoints();
     final isCurrentRoute = useIsCurrentRoute("/");
-    final paletteColor = usePaletteColor(context, albumArt, ref);
+    final paletteColor = usePaletteColor(albumArt, ref);
     final playback = ref.watch(playbackProvider);
 
     if (isCurrentRoute == false) {
@@ -45,12 +47,20 @@ class PlayerOverlay extends HookConsumerWidget {
             GoRouter.of(context).push("/player");
           }
         },
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(5),
+          child: BackdropFilter(
+            filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
             child: AnimatedContainer(
               duration: const Duration(milliseconds: 500),
               width: MediaQuery.of(context).size.width,
               height: 50,
               decoration: BoxDecoration(
-            color: paletteColor.color,
+                color: paletteColor.color.withOpacity(.7),
+                border: Border.all(
+                  color: paletteColor.titleTextColor,
+                  width: 2,
+                ),
                 borderRadius: BorderRadius.circular(5),
               ),
               child: Material(
@@ -99,6 +109,8 @@ class PlayerOverlay extends HookConsumerWidget {
               ),
             ),
           ),
+        ),
+      ),
     );
   }
 }

lib/components/Player/PlayerQueue.dart

@@ -1,56 +1,103 @@
 import 'dart:ui';
 
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:scroll_to_index/scroll_to_index.dart';
 import 'package:spotube/components/Shared/NotFound.dart';
 import 'package:spotube/components/Shared/TrackTile.dart';
 import 'package:spotube/helpers/image-to-url-string.dart';
 import 'package:spotube/helpers/zero-pad-num-str.dart';
+import 'package:spotube/hooks/useAutoScrollController.dart';
 import 'package:spotube/provider/Playback.dart';
-import 'package:collection/collection.dart';
 
 class PlayerQueue extends HookConsumerWidget {
-  const PlayerQueue({Key? key}) : super(key: key);
+  final bool floating;
+  const PlayerQueue({
+    this.floating = true,
+    Key? key,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context, ref) {
     final playback = ref.watch(playbackProvider);
+    final controller = useAutoScrollController();
     final tracks = playback.playlist?.tracks ?? [];
 
     if (tracks.isEmpty) {
       return const NotFound(vertical: true);
     }
 
+    final borderRadius = floating
+        ? BorderRadius.circular(10)
+        : const BorderRadius.only(
+            topLeft: Radius.circular(10),
+            topRight: Radius.circular(10),
+          );
+    final headlineColor = Theme.of(context).textTheme.headline4?.color;
+
+    useEffect(() {
+      if (playback.track == null || playback.playlist == null) return null;
+      final index = playback.playlist!.tracks
+          .indexWhere((track) => track.id == playback.track!.id);
+      if (index < 0) return;
+      controller.scrollToIndex(
+        index,
+        preferPosition: AutoScrollPosition.middle,
+      );
+      return null;
+    }, []);
+
     return BackdropFilter(
-      filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
+      filter: ImageFilter.blur(
+        sigmaX: 12.0,
+        sigmaY: 12.0,
+      ),
       child: Container(
+        margin: EdgeInsets.all(floating ? 8.0 : 0),
+        padding: const EdgeInsets.only(
+          top: 5.0,
+        ),
         decoration: BoxDecoration(
           color: Theme.of(context)
               .navigationRailTheme
               .backgroundColor
               ?.withOpacity(0.5),
-          borderRadius: BorderRadius.circular(10),
+          borderRadius: borderRadius,
-        ),
-        margin: const EdgeInsets.all(8.0),
-        padding: const EdgeInsets.only(
-          top: 5.0,
         ),
         child: Column(
           children: [
+            Container(
+              height: 5,
+              width: 100,
+              margin: const EdgeInsets.only(bottom: 5, top: 2),
+              decoration: BoxDecoration(
+                color: headlineColor,
+                borderRadius: BorderRadius.circular(20),
+              ),
+            ),
             Text(
               "Queue (${playback.playlist?.name})",
-              style: Theme.of(context).textTheme.headline4,
+              style: Theme.of(context).textTheme.headline4?.copyWith(
+                    fontWeight: FontWeight.bold,
+                  ),
               overflow: TextOverflow.ellipsis,
             ),
+            const SizedBox(height: 10),
             Flexible(
-              child: ListView(
+              child: ListView.builder(
+                  controller: controller,
+                  itemCount: tracks.length,
                   shrinkWrap: true,
-                children: [
+                  itemBuilder: (context, i) {
-                  ...tracks.asMap().entries.mapIndexed((i, track) {
+                    final track = tracks.asMap().entries.elementAt(i);
                     String duration =
                         "${track.value.duration?.inMinutes.remainder(60)}:${zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
-                    return Padding(
+                    return AutoScrollTag(
+                      key: ValueKey(i),
+                      controller: controller,
+                      index: i,
+                      child: Padding(
                         padding: const EdgeInsets.symmetric(horizontal: 8.0),
                         child: TrackTile(
                           playback,
@@ -64,10 +111,9 @@ class PlayerQueue extends HookConsumerWidget {
                             await playback.setPlaylistPosition(i);
                           },
                         ),
+                      ),
                     );
                   }),
-                ],
-              ),
             ),
           ],
         ),

lib/components/Player/PlayerView.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
@@ -44,22 +46,38 @@ class PlayerView extends HookConsumerWidget {
       [currentTrack?.album?.images],
     );
 
-    final PaletteColor paletteColor = usePaletteColor(context, albumArt, ref);
+    final PaletteColor paletteColor = usePaletteColor(albumArt, ref);
 
     useCustomStatusBarColor(
       paletteColor.color,
       GoRouter.of(context).location == "/player",
+      noSetBGColor: true,
     );
 
     return SafeArea(
       child: Scaffold(
-        appBar: const PageWindowTitleBar(
+        // backgroundColor: paletteColor.color,
-          leading: BackButton(),
+        body: Container(
-          backgroundColor: Colors.transparent,
+          decoration: BoxDecoration(
+            image: DecorationImage(
+              image: CachedNetworkImageProvider(
+                albumArt,
+                cacheKey: albumArt,
               ),
-        backgroundColor: paletteColor.color,
+              fit: BoxFit.cover,
-        body: Column(
+            ),
+          ),
+          child: BackdropFilter(
+            filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
+            child: Container(
+              color: paletteColor.color.withOpacity(.5),
+              child: Column(
                 children: [
+                  PageWindowTitleBar(
+                    leading: const BackButton(),
+                    backgroundColor: Colors.transparent,
+                    foregroundColor: paletteColor.titleTextColor,
+                  ),
                   Padding(
                     padding: const EdgeInsets.all(10),
                     child: Column(
@@ -70,8 +88,10 @@ class PlayerView extends HookConsumerWidget {
                                   currentTrack!.name!.length > 29
                               ? SpotubeMarqueeText(
                                   text: currentTrack.name ?? "Not playing",
-                            style:
+                                  style: Theme.of(context)
-                                Theme.of(context).textTheme.headline5?.copyWith(
+                                      .textTheme
+                                      .headline5
+                                      ?.copyWith(
                                         fontWeight: FontWeight.bold,
                                         color: paletteColor.titleTextColor,
                                       ),
@@ -83,7 +103,8 @@ class PlayerView extends HookConsumerWidget {
                         ),
                         artistsToClickableArtists(
                           currentTrack?.artists ?? [],
-                    textStyle: Theme.of(context).textTheme.headline6!.copyWith(
+                          textStyle:
+                              Theme.of(context).textTheme.headline6!.copyWith(
                                     fontWeight: FontWeight.bold,
                                     color: paletteColor.bodyTextColor,
                                   ),
@@ -112,12 +133,16 @@ class PlayerView extends HookConsumerWidget {
                   }),
                   const Spacer(),
                   PlayerActions(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                    floatingQueue: false,
                   ),
                   PlayerControls(iconColor: paletteColor.bodyTextColor),
                 ],
               ),
             ),
+          ),
+        ),
+      ),
     );
   }
 }

lib/components/Shared/PageWindowTitleBar.dart

@@ -13,15 +13,28 @@ class TitleBarActionButtons extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
+    return TextButtonTheme(
+      data: TextButtonThemeData(
+        style: ButtonStyle(
+          splashFactory: NoSplash.splashFactory,
+          shape: MaterialStateProperty.all(const RoundedRectangleBorder()),
+          overlayColor: MaterialStateProperty.all(Colors.black12),
+          padding: MaterialStateProperty.all(EdgeInsets.zero),
+          minimumSize: MaterialStateProperty.all(const Size(50, 40)),
+          maximumSize: MaterialStateProperty.all(const Size(50, 40)),
+        ),
+      ),
+      child: IconTheme(
+        data: const IconThemeData(size: 16),
+        child: Row(
           children: [
             TextButton(
                 onPressed: () {
                   appWindow.minimize();
                 },
                 style: ButtonStyle(
-              foregroundColor:
+                  foregroundColor: MaterialStateProperty.all(
-                  MaterialStateProperty.all(Theme.of(context).iconTheme.color),
+                      Theme.of(context).iconTheme.color),
                 ),
                 child: Icon(
                   Icons.minimize_rounded,
@@ -32,10 +45,13 @@ class TitleBarActionButtons extends StatelessWidget {
                   appWindow.maximizeOrRestore();
                 },
                 style: ButtonStyle(
-              foregroundColor:
+                  foregroundColor: MaterialStateProperty.all(
-                  MaterialStateProperty.all(Theme.of(context).iconTheme.color),
+                      Theme.of(context).iconTheme.color),
                 ),
-            child: Icon(Icons.crop_square_rounded, color: color)),
+                child: Icon(
+                  Icons.crop_square_rounded,
+                  color: color,
+                )),
             TextButton(
                 onPressed: () {
                   appWindow.close();
@@ -49,6 +65,8 @@ class TitleBarActionButtons extends StatelessWidget {
                   Icons.close_rounded,
                 )),
           ],
+        ),
+      ),
     );
   }
 }

lib/hooks/useCustomStatusBarColor.dart

@@ -2,12 +2,17 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 
-void useCustomStatusBarColor(Color color, bool isCurrentRoute) {
+void useCustomStatusBarColor(
+  Color color,
+  bool isCurrentRoute, {
+  bool noSetBGColor = false,
+}) {
   final context = useContext();
   final backgroundColor = Theme.of(context).backgroundColor;
   resetStatusbar() => SystemChrome.setSystemUIOverlayStyle(
         SystemUiOverlayStyle(
-          statusBarColor: backgroundColor, // status bar color
+          statusBarColor:
+              !noSetBGColor ? backgroundColor : null, // status bar color
           statusBarIconBrightness: backgroundColor.computeLuminance() > 0.179
               ? Brightness.dark
               : Brightness.light,

lib/hooks/usePaletteColor.dart

@@ -10,8 +10,8 @@ final _paletteColorState = StateProvider<PaletteColor>(
   },
 );
 
-PaletteColor usePaletteColor(
+PaletteColor usePaletteColor(String imageUrl, WidgetRef ref) {
-    BuildContext context, String imageUrl, WidgetRef ref) {
+  final context = useContext();
   final paletteColor = ref.watch(_paletteColorState);
   final mounted = useIsMounted();