From a06d891a04dda5a206c51bcecef9a60b6e349ab9 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Fri, 18 Mar 2022 20:26:03 +0600 Subject: [PATCH] Search results are horizontally scrollable instead of Wrap Hotkey Record dialog pops the route on cancel bugfix Headings & fontSizes optimized for smaller devices --- lib/components/Lyrics.dart | 29 +++++--- lib/components/Player/PlayerView.dart | 2 +- lib/components/Search/Search.dart | 67 +++++++++++++------ lib/components/Shared/RecordHotKeyDialog.dart | 2 +- 4 files changed, 69 insertions(+), 31 deletions(-) diff --git a/lib/components/Lyrics.dart b/lib/components/Lyrics.dart index 194e6134..aff38848 100644 --- a/lib/components/Lyrics.dart +++ b/lib/components/Lyrics.dart @@ -5,6 +5,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:spotify/spotify.dart'; import 'package:spotube/helpers/artist-to-string.dart'; import 'package:spotube/helpers/getLyrics.dart'; +import 'package:spotube/hooks/useBreakpoints.dart'; import 'package:spotube/provider/Playback.dart'; import 'package:spotube/provider/UserPreferences.dart'; @@ -56,6 +57,8 @@ class Lyrics extends HookConsumerWidget { playback.currentTrack, ]); + final breakpoint = useBreakpoints(); + if (lyrics.value["lyrics"] == null && playback.currentTrack != null) { if (!hasToken) { return Expanded( @@ -83,6 +86,8 @@ class Lyrics extends HookConsumerWidget { ); } + final textTheme = Theme.of(context).textTheme; + return Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, @@ -90,24 +95,32 @@ class Lyrics extends HookConsumerWidget { Center( child: Text( playback.currentTrack?.name ?? "", - style: Theme.of(context).textTheme.headline3, + style: breakpoint >= Breakpoints.md + ? textTheme.headline3 + : textTheme.headline4?.copyWith(fontSize: 25), ), ), Center( child: Text( artistsToString(playback.currentTrack?.artists ?? []), - style: Theme.of(context).textTheme.headline5, + style: breakpoint >= Breakpoints.md + ? textTheme.headline5 + : textTheme.headline6, ), ), Expanded( child: SingleChildScrollView( child: Center( - child: Text( - lyrics.value["lyrics"] == null && - playback.currentTrack == null - ? "No Track being played currently" - : lyrics.value["lyrics"]!, - style: Theme.of(context).textTheme.headline6, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text( + lyrics.value["lyrics"] == null && + playback.currentTrack == null + ? "No Track being played currently" + : lyrics.value["lyrics"]!, + style: textTheme.headline6 + ?.copyWith(color: textTheme.headline1?.color), + ), ), ), ), diff --git a/lib/components/Player/PlayerView.dart b/lib/components/Player/PlayerView.dart index a60960db..64285112 100644 --- a/lib/components/Player/PlayerView.dart +++ b/lib/components/Player/PlayerView.dart @@ -60,7 +60,7 @@ class PlayerView extends HookConsumerWidget { Text( currentTrack?.name ?? "Not playing", overflow: TextOverflow.ellipsis, - style: Theme.of(context).textTheme.headline4?.copyWith( + style: Theme.of(context).textTheme.headline5?.copyWith( fontWeight: FontWeight.bold, color: paletteColor.titleTextColor, ), diff --git a/lib/components/Search/Search.dart b/lib/components/Search/Search.dart index 6dd2e493..8d703e08 100644 --- a/lib/components/Search/Search.dart +++ b/lib/components/Search/Search.dart @@ -9,6 +9,7 @@ import 'package:spotube/components/Shared/TracksTableView.dart'; import 'package:spotube/helpers/image-to-url-string.dart'; import 'package:spotube/helpers/simple-album-to-album.dart'; import 'package:spotube/helpers/zero-pad-num-str.dart'; +import 'package:spotube/hooks/useBreakpoints.dart'; import 'package:spotube/provider/Playback.dart'; import 'package:spotube/provider/SpotifyDI.dart'; @@ -20,6 +21,10 @@ class Search extends HookConsumerWidget { SpotifyApi spotify = ref.watch(spotifyProvider); var controller = useTextEditingController(); var searchTerm = useState(""); + final albumController = useScrollController(); + final playlistController = useScrollController(); + final artistController = useScrollController(); + final breakpoint = useBreakpoints(); return Expanded( child: Column( @@ -135,13 +140,16 @@ class Search extends HookConsumerWidget { style: Theme.of(context).textTheme.headline5, ), const SizedBox(height: 10), - Center( - child: Wrap( - spacing: 20, - runSpacing: 20, - children: albums.map((album) { - return AlbumCard(simpleAlbumToAlbum(album)); - }).toList(), + Scrollbar( + controller: albumController, + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + controller: albumController, + child: Row( + children: albums.map((album) { + return AlbumCard(simpleAlbumToAlbum(album)); + }).toList(), + ), ), ), const SizedBox(height: 20), @@ -151,13 +159,22 @@ class Search extends HookConsumerWidget { style: Theme.of(context).textTheme.headline5, ), const SizedBox(height: 10), - Center( - child: Wrap( - spacing: 20, - runSpacing: 20, - children: artists.map((artist) { - return ArtistCard(artist); - }).toList(), + Scrollbar( + controller: artistController, + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + controller: artistController, + child: Row( + children: artists + .map( + (artist) => Container( + margin: const EdgeInsets.symmetric( + horizontal: 15), + child: ArtistCard(artist), + ), + ) + .toList(), + ), ), ), const SizedBox(height: 20), @@ -167,13 +184,21 @@ class Search extends HookConsumerWidget { style: Theme.of(context).textTheme.headline5, ), const SizedBox(height: 10), - Center( - child: Wrap( - spacing: 20, - runSpacing: 20, - children: playlists.map((playlist) { - return PlaylistCard(playlist); - }).toList(), + Scrollbar( + scrollbarOrientation: breakpoint > Breakpoints.md + ? ScrollbarOrientation.bottom + : ScrollbarOrientation.top, + controller: playlistController, + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + controller: playlistController, + child: Row( + children: playlists + .map( + (playlist) => PlaylistCard(playlist), + ) + .toList(), + ), ), ), ], diff --git a/lib/components/Shared/RecordHotKeyDialog.dart b/lib/components/Shared/RecordHotKeyDialog.dart index 40af28e2..4114f3c6 100644 --- a/lib/components/Shared/RecordHotKeyDialog.dart +++ b/lib/components/Shared/RecordHotKeyDialog.dart @@ -67,7 +67,7 @@ class RecordHotKeyDialog extends HookWidget { TextButton( child: const Text('Cancel'), onPressed: () { - GoRouter.of(context).pop(); + Navigator.of(context).pop(); }, ), TextButton(