From 2fd5d6fe9cf10b7c4b64f28b7e0a710355d675fa Mon Sep 17 00:00:00 2001 From: Stelios Papamichail Date: Fri, 1 Apr 2022 01:20:01 +0300 Subject: [PATCH 1/3] Added support for marquee text on album's with long descriptions and static text for those with short ones --- lib/components/Shared/PlaybuttonCard.dart | 49 ++++++++++++++++++----- pubspec.lock | 14 +++++++ pubspec.yaml | 1 + 3 files changed, 55 insertions(+), 9 deletions(-) diff --git a/lib/components/Shared/PlaybuttonCard.dart b/lib/components/Shared/PlaybuttonCard.dart index 7af2f6785..f0a71fd9e 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:marquee/marquee.dart'; class PlaybuttonCard extends StatelessWidget { final void Function()? onTap; @@ -82,7 +83,7 @@ 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( @@ -95,17 +96,47 @@ class PlaybuttonCard extends StatelessWidget { ), 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 + ? Marquee( + text: description!, + style: TextStyle( + fontSize: 13, + color: Theme.of(context) + .textTheme + .headline4 + ?.color, + ), + scrollAxis: Axis.horizontal, + crossAxisAlignment: CrossAxisAlignment.start, + blankSpace: 60.0, + velocity: 30.0, + startAfter: const Duration(seconds: 2), + pauseAfterRound: const Duration(seconds: 2), + startPadding: 10.0, + accelerationDuration: + const Duration(seconds: 1), + accelerationCurve: Curves.linear, + decelerationDuration: + const Duration(milliseconds: 500), + decelerationCurve: Curves.easeOut, + ) + : Text( + description!, + style: TextStyle( + fontSize: 13, + color: Theme.of(context) + .textTheme + .headline4 + ?.color, + ), + ), + ), ] ], ), - ) + ), ], ), ), 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: From 5df96b5892d676de52c0896b2c93992d3a277cc6 Mon Sep 17 00:00:00 2001 From: Stelios Papamichail Date: Fri, 1 Apr 2022 02:06:03 +0300 Subject: [PATCH 2/3] Added support for marquee text for the ArtistCard and made adjustments to the marquee effect in the PlayButtonCard as well --- lib/components/Artist/ArtistCard.dart | 28 +++++++++++++++++++---- lib/components/Shared/PlaybuttonCard.dart | 3 ++- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/lib/components/Artist/ArtistCard.dart b/lib/components/Artist/ArtistCard.dart index 9f2ead1a0..c09fd3af1 100644 --- a/lib/components/Artist/ArtistCard.dart +++ b/lib/components/Artist/ArtistCard.dart @@ -1,6 +1,7 @@ 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'; class ArtistCard extends StatelessWidget { @@ -41,10 +42,29 @@ 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 + ? Marquee( + text: artist.name!, + style: Theme.of(context).textTheme.headline5, + 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, + ) + : 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 f0a71fd9e..a68ca7459 100644 --- a/lib/components/Shared/PlaybuttonCard.dart +++ b/lib/components/Shared/PlaybuttonCard.dart @@ -114,13 +114,14 @@ class PlaybuttonCard extends StatelessWidget { velocity: 30.0, startAfter: const Duration(seconds: 2), pauseAfterRound: const Duration(seconds: 2), - startPadding: 10.0, accelerationDuration: const Duration(seconds: 1), accelerationCurve: Curves.linear, decelerationDuration: const Duration(milliseconds: 500), decelerationCurve: Curves.easeOut, + fadingEdgeStartFraction: 0.15, + fadingEdgeEndFraction: 0.15, ) : Text( description!, From 8a10a52b0f9ef47055e0be1b30345b9dac7f4244 Mon Sep 17 00:00:00 2001 From: Stelios Papamichail Date: Fri, 1 Apr 2022 03:26:02 +0300 Subject: [PATCH 3/3] Created a custom SpotubeMarqueeText widget to improve maintainability and also used it for the PlayButtonCards in the Browse page --- lib/components/Artist/ArtistCard.dart | 17 ++--------- lib/components/Shared/PlaybuttonCard.dart | 37 ++++++++++------------- lib/components/Shared/SpotubeWidgets.dart | 30 ++++++++++++++++++ 3 files changed, 49 insertions(+), 35 deletions(-) create mode 100644 lib/components/Shared/SpotubeWidgets.dart diff --git a/lib/components/Artist/ArtistCard.dart b/lib/components/Artist/ArtistCard.dart index c09fd3af1..c36e899f4 100644 --- a/lib/components/Artist/ArtistCard.dart +++ b/lib/components/Artist/ArtistCard.dart @@ -3,6 +3,7 @@ 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; @@ -45,21 +46,9 @@ class ArtistCard extends StatelessWidget { SizedBox( height: 30, child: artist.name!.length > 15 - ? Marquee( + ? SpotubeMarqueeText( text: artist.name!, - style: Theme.of(context).textTheme.headline5, - 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, + textStyle: Theme.of(context).textTheme.headline5!, ) : Text( artist.name!, diff --git a/lib/components/Shared/PlaybuttonCard.dart b/lib/components/Shared/PlaybuttonCard.dart index a68ca7459..169dd7782 100644 --- a/lib/components/Shared/PlaybuttonCard.dart +++ b/lib/components/Shared/PlaybuttonCard.dart @@ -1,6 +1,6 @@ import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/material.dart'; -import 'package:marquee/marquee.dart'; +import 'package:spotube/components/Shared/SpotubeWidgets.dart'; class PlaybuttonCard extends StatelessWidget { final void Function()? onTap; @@ -88,10 +88,19 @@ class PlaybuttonCard extends StatelessWidget { 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) ...[ @@ -99,29 +108,15 @@ class PlaybuttonCard extends StatelessWidget { SizedBox( height: 30, child: description!.length > 30 - ? Marquee( + ? SpotubeMarqueeText( text: description!, - style: TextStyle( + textStyle: TextStyle( fontSize: 13, color: Theme.of(context) .textTheme .headline4 ?.color, ), - 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, ) : Text( description!, 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, + ); + } +}