Created a custom SpotubeMarqueeText widget to improve maintainability and also used it for the PlayButtonCards in the Browse page

This commit is contained in:
Stelios Papamichail 2022-04-01 03:26:02 +03:00
parent 5df96b5892
commit 8a10a52b0f
3 changed files with 49 additions and 35 deletions

View File

@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:marquee/marquee.dart'; import 'package:marquee/marquee.dart';
import 'package:spotify/spotify.dart'; import 'package:spotify/spotify.dart';
import 'package:spotube/components/Shared/SpotubeWidgets.dart';
class ArtistCard extends StatelessWidget { class ArtistCard extends StatelessWidget {
final Artist artist; final Artist artist;
@ -45,21 +46,9 @@ class ArtistCard extends StatelessWidget {
SizedBox( SizedBox(
height: 30, height: 30,
child: artist.name!.length > 15 child: artist.name!.length > 15
? Marquee( ? SpotubeMarqueeText(
text: artist.name!, text: artist.name!,
style: Theme.of(context).textTheme.headline5, textStyle: 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( : Text(
artist.name!, artist.name!,

View File

@ -1,6 +1,6 @@
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:marquee/marquee.dart'; import 'package:spotube/components/Shared/SpotubeWidgets.dart';
class PlaybuttonCard extends StatelessWidget { class PlaybuttonCard extends StatelessWidget {
final void Function()? onTap; final void Function()? onTap;
@ -88,10 +88,19 @@ class PlaybuttonCard extends StatelessWidget {
children: [ children: [
Tooltip( Tooltip(
message: title, message: title,
child: Text( child: SizedBox(
title, height: 20,
style: const TextStyle(fontWeight: FontWeight.bold), child: title.length > 25
overflow: TextOverflow.ellipsis, ? SpotubeMarqueeText(
text: title,
textStyle: const TextStyle(
fontWeight: FontWeight.bold),
)
: Text(
title,
style: const TextStyle(
fontWeight: FontWeight.bold),
),
), ),
), ),
if (description != null) ...[ if (description != null) ...[
@ -99,29 +108,15 @@ class PlaybuttonCard extends StatelessWidget {
SizedBox( SizedBox(
height: 30, height: 30,
child: description!.length > 30 child: description!.length > 30
? Marquee( ? SpotubeMarqueeText(
text: description!, text: description!,
style: TextStyle( textStyle: TextStyle(
fontSize: 13, fontSize: 13,
color: Theme.of(context) color: Theme.of(context)
.textTheme .textTheme
.headline4 .headline4
?.color, ?.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( : Text(
description!, description!,

View File

@ -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,
);
}
}