fix: tabbar overflow in small screen, artist card too small title and…

… synced lyrics contrast increased
KRTirtho · Aug 19, 2022 · 585de8c · 585de8c
1 parent 8d77b69
commit 585de8c
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<SpotubeTrackMatchAlgorithm>(
                         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
@@ -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
@@ -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
@@ -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
@@ -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),
+    ),
   );
 }