From 585de8c1def9750826568317109b242a5e18f28c Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Fri, 19 Aug 2022 12:58:35 +0600 Subject: [PATCH] fix: tabbar overflow in small screen, artist card too small title and synced lyrics contrast increased --- lib/components/Artist/ArtistCard.dart | 16 +++---- lib/components/Library/UserLibrary.dart | 9 ++-- lib/components/Lyrics/SyncedLyrics.dart | 43 +++++++++++-------- lib/components/Player/PlayerView.dart | 1 - lib/components/Settings/Settings.dart | 21 ++++++--- lib/components/Shared/PlaybuttonCard.dart | 2 - lib/components/Shared/SpotubeMarqueeText.dart | 3 +- lib/themes/dark-theme.dart | 8 ++++ lib/themes/light-theme.dart | 8 ++++ 9 files changed, 67 insertions(+), 44 deletions(-) diff --git a/lib/components/Artist/ArtistCard.dart b/lib/components/Artist/ArtistCard.dart index f25c91701..c60072745 100644 --- a/lib/components/Artist/ArtistCard.dart +++ b/lib/components/Artist/ArtistCard.dart @@ -47,16 +47,12 @@ class ArtistCard extends StatelessWidget { minRadius: 20, backgroundImage: backgroundImage, ), - SizedBox( - height: 20, - child: SpotubeMarqueeText( - text: artist.name!, - style: Theme.of(context).textTheme.bodyLarge!.copyWith( - fontWeight: FontWeight.bold, - ), - minStartLength: 15, - isHovering: isHovering, - ), + SpotubeMarqueeText( + text: artist.name!, + style: Theme.of(context).textTheme.bodyLarge!.copyWith( + fontWeight: FontWeight.bold, + ), + isHovering: isHovering, ), Text( "Artist", diff --git a/lib/components/Library/UserLibrary.dart b/lib/components/Library/UserLibrary.dart index 43f8bc5ff..84670c633 100644 --- a/lib/components/Library/UserLibrary.dart +++ b/lib/components/Library/UserLibrary.dart @@ -18,12 +18,9 @@ class UserLibrary extends ConsumerWidget { length: 4, child: SafeArea( child: Scaffold( - appBar: TabBar( - indicator: const BoxDecoration(color: Colors.transparent), - labelColor: Theme.of(context).primaryColor, - unselectedLabelColor: - Theme.of(context).textTheme.bodyText1?.color, - tabs: const [ + appBar: const TabBar( + isScrollable: true, + tabs: [ Tab(text: "Playlist"), Tab(text: "Artists"), Tab(text: "Album"), diff --git a/lib/components/Lyrics/SyncedLyrics.dart b/lib/components/Lyrics/SyncedLyrics.dart index b75f264e5..c7fa84805 100644 --- a/lib/components/Lyrics/SyncedLyrics.dart +++ b/lib/components/Lyrics/SyncedLyrics.dart @@ -1,5 +1,6 @@ import 'dart:ui'; +import 'package:auto_size_text/auto_size_text.dart'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; @@ -160,7 +161,6 @@ class SyncedLyrics extends HookConsumerWidget { child: SpotubeMarqueeText( text: playback.track?.name ?? "Not Playing", style: headlineTextStyle, - minStartLength: 29, isHovering: true, ), ), @@ -218,24 +218,31 @@ class SyncedLyrics extends HookConsumerWidget { key: ValueKey(index), index: index, controller: controller, - child: Center( - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Text( - lyricSlice.text, - style: TextStyle( - // indicating the active state of that lyric slice - color: isActive - ? Theme.of(context).primaryColor - : palette.bodyTextColor, - fontWeight: - isActive ? FontWeight.bold : null, - fontSize: 30, + child: lyricSlice.text.isEmpty + ? Container() + : Center( + child: Padding( + padding: const EdgeInsets.all(8.0), + child: AutoSizeText( + lyricSlice.text, + maxLines: 2, + style: Theme.of(context) + .textTheme + .headline4 + ?.copyWith( + color: isActive + ? Theme.of(context) + .backgroundColor + : palette.bodyTextColor, + // indicating the active state of that lyric slice + fontWeight: isActive + ? FontWeight.bold + : null, + ), + textAlign: TextAlign.center, + ), + ), ), - textAlign: TextAlign.center, - ), - ), - ), ); }, ), diff --git a/lib/components/Player/PlayerView.dart b/lib/components/Player/PlayerView.dart index 1e9df5c3d..0d90ae748 100644 --- a/lib/components/Player/PlayerView.dart +++ b/lib/components/Player/PlayerView.dart @@ -90,7 +90,6 @@ class PlayerView extends HookConsumerWidget { color: paletteColor.titleTextColor, ), isHovering: true, - minStartLength: 29, ), ), TypeConversionUtils.artists_X_ClickableArtists( diff --git a/lib/components/Settings/Settings.dart b/lib/components/Settings/Settings.dart index 005537ee9..30a61fff0 100644 --- a/lib/components/Settings/Settings.dart +++ b/lib/components/Settings/Settings.dart @@ -1,3 +1,4 @@ +import 'package:auto_size_text/auto_size_text.dart'; import 'package:file_picker/file_picker.dart'; import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; @@ -164,7 +165,10 @@ class Settings extends HookConsumerWidget { ), AdaptiveListTile( leading: const Icon(Icons.screen_search_desktop_rounded), - title: const Text("Format of the YouTube Search term"), + title: const AutoSizeText( + "Format of the YouTube Search term", + maxLines: 2, + ), subtitle: const Text("(Case sensitive)"), breakOn: Breakpoints.lg, trailing: ConstrainedBox( @@ -218,7 +222,7 @@ class Settings extends HookConsumerWidget { Icons.login_rounded, color: Theme.of(context).primaryColor, ), - title: Text( + title: AutoSizeText( "Login with your Spotify account", style: TextStyle( color: Theme.of(context).primaryColor, @@ -250,7 +254,10 @@ class Settings extends HookConsumerWidget { ), AdaptiveListTile( leading: const Icon(Icons.low_priority_rounded), - title: const Text("Track Match Algorithm"), + title: const AutoSizeText( + "Track Match Algorithm", + maxLines: 1, + ), trailing: DropdownButton( value: preferences.trackMatchAlgorithm, items: const [ @@ -307,7 +314,10 @@ class Settings extends HookConsumerWidget { Auth auth = ref.watch(authProvider); return ListTile( leading: const Icon(Icons.logout_rounded), - title: const Text("Log out of this account"), + title: const AutoSizeText( + "Log out of this account", + maxLines: 1, + ), trailing: ElevatedButton( child: const Text("Logout"), style: ButtonStyle( @@ -328,8 +338,9 @@ class Settings extends HookConsumerWidget { Icons.favorite_border_rounded, color: Colors.pink, ), - title: const Text( + title: const AutoSizeText( "We know you Love Spotube", + maxLines: 1, style: TextStyle( color: Colors.pink, fontWeight: FontWeight.bold, diff --git a/lib/components/Shared/PlaybuttonCard.dart b/lib/components/Shared/PlaybuttonCard.dart index 922e8464e..40ba479cb 100644 --- a/lib/components/Shared/PlaybuttonCard.dart +++ b/lib/components/Shared/PlaybuttonCard.dart @@ -106,7 +106,6 @@ class PlaybuttonCard extends StatelessWidget { text: title, style: const TextStyle(fontWeight: FontWeight.bold), - minStartLength: 20, isHovering: isHovering, ), ), @@ -125,7 +124,6 @@ class PlaybuttonCard extends StatelessWidget { ?.color, ), isHovering: isHovering, - minStartLength: 30, ), ), ] diff --git a/lib/components/Shared/SpotubeMarqueeText.dart b/lib/components/Shared/SpotubeMarqueeText.dart index 40159d998..692a0027a 100644 --- a/lib/components/Shared/SpotubeMarqueeText.dart +++ b/lib/components/Shared/SpotubeMarqueeText.dart @@ -4,13 +4,11 @@ import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:marquee/marquee.dart'; class SpotubeMarqueeText extends HookWidget { - final int? minStartLength; final bool? isHovering; const SpotubeMarqueeText({ Key? key, required this.text, this.style, - this.minStartLength, this.isHovering, }) : super(key: key); final TextStyle? style; @@ -29,6 +27,7 @@ class SpotubeMarqueeText extends HookWidget { text, minFontSize: 13, style: style, + maxLines: 1, overflowReplacement: Marquee( key: uKey.value, text: text, diff --git a/lib/themes/dark-theme.dart b/lib/themes/dark-theme.dart index 8e91bfd9e..79c1f1000 100644 --- a/lib/themes/dark-theme.dart +++ b/lib/themes/dark-theme.dart @@ -80,5 +80,13 @@ ThemeData darkTheme({ } }), ), + tabBarTheme: TabBarTheme( + indicator: const BoxDecoration(color: Colors.transparent), + labelColor: accentMaterialColor[500], + unselectedLabelColor: Colors.white, + labelStyle: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16), + unselectedLabelStyle: + const TextStyle(fontWeight: FontWeight.w600, fontSize: 16), + ), ); } diff --git a/lib/themes/light-theme.dart b/lib/themes/light-theme.dart index 2784fb4ed..4b8481002 100644 --- a/lib/themes/light-theme.dart +++ b/lib/themes/light-theme.dart @@ -104,5 +104,13 @@ ThemeData lightTheme({ } }), ), + tabBarTheme: TabBarTheme( + indicator: const BoxDecoration(color: Colors.transparent), + labelColor: accentMaterialColor[500], + unselectedLabelColor: Colors.grey[850], + labelStyle: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16), + unselectedLabelStyle: + const TextStyle(fontWeight: FontWeight.w600, fontSize: 16), + ), ); }