bvandeusen
21ab0d78bb
AlbumCard gains optional `width` (default 140 keeps horizontal lists unchanged) and `titleMaxLines` (default 1) so callers can let the title wrap to a second line. Cover sizes to width - 16 instead of a hardcoded 124, so the card scales down cleanly when a narrower cell width is passed in. Artist detail grid: switch to 3 columns. LayoutBuilder computes the cell width from the available width so AlbumCard sizes to the cell exactly (no overflow). cellH = cover + gap + 2-line title + artist line + small fudge — tight enough that there's no visible gap below the card, tall enough to fit a wrapped title.
78 lines
2.5 KiB
Dart
78 lines
2.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
|
|
import '../../models/album.dart';
|
|
import '../../shared/widgets/server_image.dart';
|
|
import '../../theme/theme_extension.dart';
|
|
|
|
class AlbumCard extends StatelessWidget {
|
|
const AlbumCard({
|
|
required this.album,
|
|
required this.onTap,
|
|
this.width = 140,
|
|
this.titleMaxLines = 1,
|
|
super.key,
|
|
});
|
|
final AlbumRef album;
|
|
final VoidCallback onTap;
|
|
|
|
/// Outer width of the card. Cover is square at width - 16 (8dp
|
|
/// horizontal padding either side). Default suits horizontal lists;
|
|
/// grids should pass the cell width so the card scales down.
|
|
final double width;
|
|
|
|
/// Lets callers (e.g. the artist detail grid) allow the title to
|
|
/// wrap to a second line so it isn't truncated to a single
|
|
/// ellipsized character at narrower widths.
|
|
final int titleMaxLines;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final fs = Theme.of(context).extension<FabledSwordTheme>()!;
|
|
final coverSize = width - 16;
|
|
return SizedBox(
|
|
width: width,
|
|
child: Material(
|
|
color: Colors.transparent,
|
|
child: InkWell(
|
|
onTap: onTap,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(6),
|
|
child: Container(
|
|
width: coverSize,
|
|
height: coverSize,
|
|
color: fs.slate,
|
|
child: album.coverUrl.isEmpty
|
|
? SvgPicture.asset('assets/svg/album-fallback.svg',
|
|
fit: BoxFit.cover)
|
|
: ServerImage(url: album.coverUrl, fit: BoxFit.cover),
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
album.title,
|
|
maxLines: titleMaxLines,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(color: fs.parchment, fontSize: 14),
|
|
),
|
|
Text(
|
|
album.artistName,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(color: fs.ash, fontSize: 12),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|