Merge pull request #47 from SteliosPapamichail/marquee-album-text

Implemented marquee text for album titles, descriptions and artist names
KRTirtho · Apr 1, 2022 · 6111e8c · 6111e8c
2 parents c27b497 + 8a10a52
commit 6111e8c
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 17 deletions.
diff --git a/lib/components/Artist/ArtistCard.dart b/lib/components/Artist/ArtistCard.dart
@@ -1,7 +1,9 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
+import 'package:marquee/marquee.dart';
 import 'package:spotify/spotify.dart';
+import 'package:spotube/components/Shared/SpotubeWidgets.dart';
 
 class ArtistCard extends StatelessWidget {
   final Artist artist;
@@ -41,10 +43,17 @@ class ArtistCard extends StatelessWidget {
                 minRadius: 20,
                 backgroundImage: backgroundImage,
               ),
-              Text(
-                artist.name!,
-                style: Theme.of(context).textTheme.headline5,
-                overflow: TextOverflow.ellipsis,
+              SizedBox(
+                height: 30,
+                child: artist.name!.length > 15
+                    ? SpotubeMarqueeText(
+                        text: artist.name!,
+                        textStyle: Theme.of(context).textTheme.headline5!,
+                      )
+                    : Text(
+                        artist.name!,
+                        style: Theme.of(context).textTheme.headline5,
+                      ),
               ),
               Text(
                 "Artist",

diff --git a/lib/components/Shared/PlaybuttonCard.dart b/lib/components/Shared/PlaybuttonCard.dart
@@ -1,5 +1,6 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:spotube/components/Shared/SpotubeWidgets.dart';
 
 class PlaybuttonCard extends StatelessWidget {
   final void Function()? onTap;
@@ -82,30 +83,56 @@ class PlaybuttonCard extends StatelessWidget {
                 const SizedBox(height: 5),
                 Padding(
                   padding:
-                      const EdgeInsets.symmetric(horizontal: 8, vertical: 10),
+                      const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                   child: Column(
                     children: [
                       Tooltip(
                         message: title,
-                        child: Text(
-                          title,
-                          style: const TextStyle(fontWeight: FontWeight.bold),
-                          overflow: TextOverflow.ellipsis,
+                        child: SizedBox(
+                          height: 20,
+                          child: title.length > 25
+                              ? SpotubeMarqueeText(
+                                  text: title,
+                                  textStyle: const TextStyle(
+                                      fontWeight: FontWeight.bold),
+                                )
+                              : Text(
+                                  title,
+                                  style: const TextStyle(
+                                      fontWeight: FontWeight.bold),
+                                ),
                         ),
                       ),
                       if (description != null) ...[
                         const SizedBox(height: 10),
-                        Text(
-                          description!,
-                          style: TextStyle(
-                            fontSize: 13,
-                            color: Theme.of(context).textTheme.headline4?.color,
-                          ),
-                        )
+                        SizedBox(
+                          height: 30,
+                          child: description!.length > 30
+                              ? SpotubeMarqueeText(
+                                  text: description!,
+                                  textStyle: TextStyle(
+                                    fontSize: 13,
+                                    color: Theme.of(context)
+                                        .textTheme
+                                        .headline4
+                                        ?.color,
+                                  ),
+                                )
+                              : Text(
+                                  description!,
+                                  style: TextStyle(
+                                    fontSize: 13,
+                                    color: Theme.of(context)
+                                        .textTheme
+                                        .headline4
+                                        ?.color,
+                                  ),
+                                ),
+                        ),
                       ]
                     ],
                   ),
-                )
+                ),
               ],
             ),
           ),

diff --git a/lib/components/Shared/SpotubeWidgets.dart b/lib/components/Shared/SpotubeWidgets.dart
@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:marquee/marquee.dart';
+
+class SpotubeMarqueeText extends StatelessWidget {
+  const SpotubeMarqueeText(
+      {Key? key, required this.text, required this.textStyle})
+      : super(key: key);
+  final TextStyle textStyle;
+  final String text;
+
+  @override
+  Widget build(BuildContext context) {
+    return Marquee(
+      text: text,
+      style: textStyle,
+      scrollAxis: Axis.horizontal,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      blankSpace: 60.0,
+      velocity: 30.0,
+      startAfter: const Duration(seconds: 2),
+      pauseAfterRound: const Duration(seconds: 2),
+      accelerationDuration: const Duration(seconds: 1),
+      accelerationCurve: Curves.linear,
+      decelerationDuration: const Duration(milliseconds: 500),
+      decelerationCurve: Curves.easeOut,
+      fadingEdgeStartFraction: 0.15,
+      fadingEdgeEndFraction: 0.15,
+    );
+  }
+}
diff --git a/pubspec.lock b/pubspec.lock
@@ -169,6 +169,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.4"
+  fading_edge_scrollview:
+    dependency: transitive
+    description:
+      name: fading_edge_scrollview
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.1"
   fake_async:
     dependency: transitive
     description:
@@ -387,6 +394,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.2"
+  marquee:
+    dependency: "direct main"
+    description:
+      name: marquee
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.2.1"
   matcher:
     dependency: transitive
     description:

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -58,6 +58,7 @@ dependencies:
   just_audio_background: ^0.0.1-beta.5
   logger: ^1.1.0
   permission_handler: ^9.2.0
+  marquee: ^2.2.1
 
 dev_dependencies:
   flutter_test: