diff --git a/lib/components/Artist/ArtistCard.dart b/lib/components/Artist/ArtistCard.dart index 9f2ead1a0..c36e899f4 100644 --- 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 index 7af2f6785..169dd7782 100644 --- 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 new file mode 100644 index 000000000..fe9d11c26 --- /dev/null +++ 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 index 0ed0e552e..2161bf14a 100644 --- 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 index f04723602..3e40db81d 100644 --- 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: