kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-12 23:45:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: artist card to use shadcn card

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2024-12-21 21:12:49 +06:00
parent 2925dd6748
commit 418a0d29bd
1 changed files with 44 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
lib/modules/artist/artist_card.dart
View File

@ -1,14 +1,13 @@
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:skeletonizer/skeletonizer.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/components/image/universal_image.dart';
import 'package:spotube/extensions/context.dart';
import 'package:spotube/extensions/image.dart';
import 'package:spotube/hooks/utils/use_breakpoint_value.dart';
import 'package:spotube/hooks/utils/use_brightness_value.dart';
import 'package:spotube/pages/artist/artist.dart';
import 'package:spotube/provider/blacklist_provider.dart';
import 'package:spotube/utils/service_utils.dart';
@ -33,98 +32,50 @@ class ArtistCard extends HookConsumerWidget {
),
);
final radius = BorderRadius.circular(15);
final double size = useBreakpointValue<double>(
xs: 130,
sm: 130,
md: 150,
others: 170,
);
return Container(
width: size,
margin: const EdgeInsets.symmetric(vertical: 5),
child: Material(
shadowColor: theme.colorScheme.surface,
color: Color.lerp(
theme.colorScheme.surfaceContainerHighest,
theme.colorScheme.surface,
useBrightnessValue(.9, .7),
),
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: radius,
side: isBlackListed == true
? const BorderSide(
color: Colors.red,
width: 2,
)
: BorderSide.none,
),
child: InkWell(
onTap: () {
ServiceUtils.pushNamed(
context,
ArtistPage.name,
pathParameters: {
"id": artist.id!,
},
);
return SizedBox(
width: 180,
child: Button.card(
onPressed: () {
ServiceUtils.pushNamed(
context,
ArtistPage.name,
pathParameters: {
"id": artist.id!,
},
borderRadius: radius,
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
children: [
Stack(
children: [
ConstrainedBox(
constraints: BoxConstraints(
maxHeight: size,
),
child: CircleAvatar(
backgroundImage: backgroundImage,
radius: size / 2,
),
),
Positioned(
right: 0,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 5,
),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(50)),
child: Skeleton.ignore(
child: Text(
context.l10n.artist,
style: const TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
const SizedBox(height: 10),
AutoSizeText(
artist.name!,
maxLines: 1,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: theme.textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.bold,
),
);
},
child: Column(
children: [
Avatar(
initials: artist.name!.trim()[0].toUpperCase(),
provider: backgroundImage,
size: 130,
),
const Gap(10),
AutoSizeText(
artist.name!,
maxLines: 2,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: theme.typography.bold,
),
const Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
if (isBlackListed == true) ...[
DestructiveBadge(
child: Text(context.l10n.blacklisted.toUpperCase()),
),
const Gap(5),
],
),
)),
SecondaryBadge(
child: Text(context.l10n.artist.toUpperCase()),
)
],
)
],
),
),
);
}