chore: fix width of scrollbar & non-interactive scrollbar in android

lib/components/library/user_albums.dart

@@ -7,6 +7,7 @@ import 'package:spotify/spotify.dart';
 
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/album/album_card.dart';
+import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
 import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
 import 'package:spotube/components/shared/waypoint.dart';
@@ -70,12 +71,14 @@ class UserAlbums extends HookConsumerWidget {
                 child: SearchBar(
                   onChanged: (value) => searchText.value = value,
                   leading: const Icon(SpotubeIcons.filter),
-                  hintText: context.l10n.filter_artist,
+                  hintText: context.l10n.filter_albums,
                 ),
               ),
             ),
           ),
           body: SizedBox.expand(
+            child: InterScrollbar(
+              controller: controller,
               child: SingleChildScrollView(
                 padding: const EdgeInsets.all(8.0),
                 controller: controller,
@@ -108,6 +111,7 @@ class UserAlbums extends HookConsumerWidget {
             ),
           ),
         ),
+      ),
     );
   }
 }

lib/components/library/user_artists.dart

@@ -7,6 +7,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
 import 'package:spotube/components/artist/artist_card.dart';
+import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
@@ -78,6 +79,8 @@ class UserArtists extends HookConsumerWidget {
               onRefresh: () async {
                 await artistQuery.refresh();
               },
+              child: InterScrollbar(
+                controller: controller,
                 child: SingleChildScrollView(
                   controller: controller,
                   child: SizedBox(
@@ -96,6 +99,7 @@ class UserArtists extends HookConsumerWidget {
                   ),
                 ),
               ),
+            ),
     );
   }
 }

lib/components/library/user_local_tracks.dart

@@ -17,6 +17,7 @@ import 'package:permission_handler/permission_handler.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/expandable_search/expandable_search.dart';
+import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_track_tile.dart';
 import 'package:spotube/components/shared/sort_tracks_dropdown.dart';
 import 'package:spotube/components/shared/track_table/track_tile.dart';
@@ -286,6 +287,7 @@ class UserLocalTracks extends HookConsumerWidget {
                 onRefresh: () async {
                   ref.refresh(localTracksProvider);
                 },
+                child: InterScrollbar(
                   child: ListView.builder(
                     physics: const AlwaysScrollableScrollPhysics(),
                     itemCount: filteredTracks.length,
@@ -306,6 +308,7 @@ class UserLocalTracks extends HookConsumerWidget {
                     },
                   ),
                 ),
+              ),
             );
           },
           loading: () =>

lib/components/library/user_playlists.dart

@@ -8,6 +8,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/playlist/playlist_create_dialog.dart';
+import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
 import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
 import 'package:spotube/components/playlist/playlist_card.dart';
@@ -79,6 +80,8 @@ class UserPlaylists extends HookConsumerWidget {
 
     return RefreshIndicator(
       onRefresh: playlistsQuery.refresh,
+      child: InterScrollbar(
+        controller: controller,
         child: SingleChildScrollView(
           controller: controller,
           physics: const AlwaysScrollableScrollPhysics(),
@@ -136,6 +139,7 @@ class UserPlaylists extends HookConsumerWidget {
             ),
           ),
         ),
+      ),
     );
   }
 }

lib/components/player/player_queue.dart

@@ -10,6 +10,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:scroll_to_index/scroll_to_index.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/fallbacks/not_found.dart';
+import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
 import 'package:spotube/components/shared/track_table/track_tile.dart';
 import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/context.dart';
@@ -196,6 +197,8 @@ class PlayerQueue extends HookConsumerWidget {
                 const SizedBox(height: 10),
                 if (!isSearching.value && searchText.value.isEmpty)
                   Flexible(
+                    child: InterScrollbar(
+                      controller: controller,
                       child: ReorderableListView.builder(
                         onReorder: (oldIndex, newIndex) {
                           playlistNotifier.moveTrack(oldIndex, newIndex);
@@ -233,15 +236,18 @@ class PlayerQueue extends HookConsumerWidget {
                           );
                         },
                       ),
+                    ),
                   )
                 else
                   Flexible(
+                    child: InterScrollbar(
                       child: ListView.builder(
                         itemCount: filteredTracks.length,
                         itemBuilder: (context, i) {
                           final track = filteredTracks.elementAt(i);
                           return Padding(
-                          padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 8.0),
                             child: TrackTile(
                               index: i,
                               track: track,
@@ -256,6 +262,7 @@ class PlayerQueue extends HookConsumerWidget {
                         },
                       ),
                     ),
+                  ),
               ],
             );
           }),

lib/components/shared/inter_scrollbar/inter_scrollbar.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+class InterScrollbar extends HookWidget {
+  final Widget child;
+  final ScrollController? controller;
+  final bool? thumbVisibility;
+  final bool? trackVisibility;
+  final double? thickness;
+  final Radius? radius;
+  final bool Function(ScrollNotification)? notificationPredicate;
+  final bool? interactive;
+  final ScrollbarOrientation? scrollbarOrientation;
+
+  const InterScrollbar({
+    super.key,
+    required this.child,
+    this.controller,
+    this.thumbVisibility,
+    this.trackVisibility,
+    this.thickness,
+    this.radius,
+    this.notificationPredicate,
+    this.interactive,
+    this.scrollbarOrientation,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    if (DesktopTools.platform.isDesktop) return child;
+
+    return ScrollbarTheme(
+      data: theme.scrollbarTheme.copyWith(
+        crossAxisMargin: 10,
+        minThumbLength: 80,
+        thickness: MaterialStateProperty.resolveWith((states) {
+          if (states.contains(MaterialState.hovered) ||
+              states.contains(MaterialState.dragged) ||
+              states.contains(MaterialState.pressed)) {
+            return 40;
+          }
+          return 20;
+        }),
+        radius: const Radius.circular(20),
+        thumbColor: MaterialStateProperty.resolveWith((states) {
+          if (states.contains(MaterialState.hovered) ||
+              states.contains(MaterialState.dragged)) {
+            return theme.colorScheme.onSurface.withOpacity(0.5);
+          }
+          return theme.colorScheme.onSurface.withOpacity(0.3);
+        }),
+      ),
+      child: Scrollbar(
+        controller: controller,
+        thumbVisibility: thumbVisibility,
+        trackVisibility: trackVisibility,
+        thickness: thickness,
+        radius: radius,
+        notificationPredicate: notificationPredicate,
+        interactive: interactive ?? true,
+        scrollbarOrientation: scrollbarOrientation,
+        child: child,
+      ),
+    );
+  }
+}

lib/components/shared/track_table/track_collection_view/track_collection_view.dart

@@ -7,6 +7,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/playlist/playlist_create_dialog.dart';
+import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_track_tile.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
 import 'package:spotube/components/shared/track_table/track_collection_view/track_collection_heading.dart';
@@ -139,6 +140,8 @@ class TrackCollectionView<T> extends HookConsumerWidget {
           onRefresh: () async {
             await tracksSnapshot.refresh();
           },
+          child: InterScrollbar(
+            controller: controller,
             child: CustomScrollView(
               controller: controller,
               physics: const AlwaysScrollableScrollPhysics(),
@@ -265,6 +268,7 @@ class TrackCollectionView<T> extends HookConsumerWidget {
                 )
               ],
             ),
+          ),
         ));
   }
 }

lib/pages/home/genres.dart

@@ -7,6 +7,7 @@ import 'package:spotify/spotify.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/genre/category_card.dart';
 import 'package:spotube/components/shared/expandable_search/expandable_search.dart';
+import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_categories.dart';
 import 'package:spotube/components/shared/waypoint.dart';
 
@@ -77,6 +78,8 @@ class GenrePage extends HookConsumerWidget {
               const ShimmerCategories()
             else
               Expanded(
+                child: InterScrollbar(
+                  controller: scrollController,
                   child: ListView.builder(
                     controller: scrollController,
                     itemCount: categories.length,
@@ -94,6 +97,7 @@ class GenrePage extends HookConsumerWidget {
                     },
                   ),
                 ),
+              ),
           ],
         ),
       ),

lib/pages/home/personalized.dart

@@ -6,6 +6,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/album/album_card.dart';
 import 'package:spotube/components/playlist/playlist_card.dart';
+import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_categories.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
 import 'package:spotube/components/shared/waypoint.dart';
@@ -96,6 +97,7 @@ class PersonalizedPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
+    final controller = useScrollController();
     final auth = ref.watch(AuthenticationNotifier.provider);
     final featuredPlaylistsQuery = useQueries.playlist.featured(ref);
     final playlists = useMemoized(
@@ -124,7 +126,10 @@ class PersonalizedPage extends HookConsumerWidget {
       [newReleases.pages],
     );
 
-    return ListView(
+    return InterScrollbar(
+      controller: controller,
+      child: ListView(
+        controller: controller,
         children: [
           if (!featuredPlaylistsQuery.hasPageData)
             const ShimmerCategories()
@@ -135,7 +140,9 @@ class PersonalizedPage extends HookConsumerWidget {
               hasNextPage: featuredPlaylistsQuery.hasNextPage,
               onFetchMore: featuredPlaylistsQuery.fetchNext,
             ),
-        if (auth != null && newReleases.hasPageData && userArtistsQuery.hasData)
+          if (auth != null &&
+              newReleases.hasPageData &&
+              userArtistsQuery.hasData)
             PersonalizedItemCard(
               albums: albums,
               title: context.l10n.new_releases,
@@ -158,6 +165,7 @@ class PersonalizedPage extends HookConsumerWidget {
             );
           })
         ],
+      ),
     );
   }
 }

lib/pages/settings/settings.dart

@@ -17,6 +17,7 @@ import 'package:spotube/components/settings/color_scheme_picker_dialog.dart';
 import 'package:spotube/components/settings/section_card_with_heading.dart';
 import 'package:spotube/components/shared/adaptive/adaptive_list_tile.dart';
 import 'package:spotube/components/shared/adaptive/adaptive_select_tile.dart';
+import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
 import 'package:spotube/collections/spotify_markets.dart';
 import 'package:spotube/extensions/constrains.dart';
@@ -70,6 +71,7 @@ class SettingsPage extends HookConsumerWidget {
             Flexible(
               child: Container(
                 constraints: const BoxConstraints(maxWidth: 1366),
+                child: InterScrollbar(
                   child: ListView(
                     children: [
                       const SettingsAccountSection(),
@@ -131,7 +133,8 @@ class SettingsPage extends HookConsumerWidget {
                           AdaptiveSelectTile<LayoutMode>(
                             secondary: const Icon(SpotubeIcons.dashboard),
                             title: Text(context.l10n.layout_mode),
-                          subtitle: Text(context.l10n.override_layout_settings),
+                            subtitle:
+                                Text(context.l10n.override_layout_settings),
                             value: preferences.layoutMode,
                             onChanged: (value) {
                               if (value != null) {
@@ -268,15 +271,15 @@ class SettingsPage extends HookConsumerWidget {
                                                 TextSpan(
                                                   text: context
                                                       .l10n.piped_description,
-                                                style:
+                                                  style: theme
-                                                    theme.textTheme.bodyMedium,
+                                                      .textTheme.bodyMedium,
                                                 ),
                                                 const TextSpan(text: "\n"),
                                                 TextSpan(
-                                                text:
+                                                  text: context
-                                                    context.l10n.piped_warning,
+                                                      .l10n.piped_warning,
-                                                style:
+                                                  style: theme
-                                                    theme.textTheme.labelMedium,
+                                                      .textTheme.labelMedium,
                                                 )
                                               ],
                                             ),
@@ -313,7 +316,8 @@ class SettingsPage extends HookConsumerWidget {
                                               .toList(),
                                           onChanged: (value) {
                                             if (value != null) {
-                                            preferences.setPipedInstance(value);
+                                              preferences
+                                                  .setPipedInstance(value);
                                             }
                                           },
                                         );
@@ -571,6 +575,7 @@ class SettingsPage extends HookConsumerWidget {
                   ),
                 ),
               ),
+            ),
           ],
         ),
       ),

lib/themes/theme.dart

@@ -69,13 +69,7 @@ ThemeData theme(Color seed, Brightness brightness, bool isAmoled) {
         ),
       ),
     ),
-    scrollbarTheme: DesktopTools.platform.isMobile
+    scrollbarTheme: const ScrollbarThemeData(
-        ? const ScrollbarThemeData(
-            interactive: true,
-            thickness: MaterialStatePropertyAll(18),
-            minThumbLength: 20,
-          )
-        : const ScrollbarThemeData(
       thickness: MaterialStatePropertyAll(14),
     ),
   );