feat(flutter/library): card + row widgets (artist/album/track)

HorizontalScrollRow takes an optional shared ScrollController so multi-row sections (Most played: 3 rows) couple their scroll like the web HorizontalScrollRow.svelte. Cards fall back to the synced album-fallback.svg when coverUrl is empty.
2026-05-02 17:29:03 -04:00
parent 3e267918b7
commit c47deb3c87
5 changed files with 253 additions and 0 deletions
@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+
+import '../../models/track.dart';
+import '../../theme/theme_extension.dart';
+
+class TrackRow extends StatelessWidget {
+  const TrackRow({
+    required this.track,
+    required this.onTap,
+    this.trailing,
+    super.key,
+  });
+  final TrackRef track;
+  final VoidCallback onTap;
+  final Widget? trailing;
+
+  @override
+  Widget build(BuildContext context) {
+    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
+    final mins = (track.durationSec ~/ 60).toString().padLeft(2, '0');
+    final secs = (track.durationSec % 60).toString().padLeft(2, '0');
+    return InkWell(
+      onTap: onTap,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+        child: Row(children: [
+          if (track.trackNumber != null)
+            SizedBox(
+              width: 28,
+              child: Text(
+                track.trackNumber.toString(),
+                style: TextStyle(color: fs.ash, fontSize: 13),
+              ),
+            ),
+          Expanded(
+            child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+              Text(
+                track.title,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: TextStyle(color: fs.parchment, fontSize: 14),
+              ),
+              Text(
+                track.artistName,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: TextStyle(color: fs.ash, fontSize: 12),
+              ),
+            ]),
+          ),
+          Text('$mins:$secs', style: TextStyle(color: fs.ash, fontSize: 12)),
+          if (trailing != null)
+            Padding(
+              padding: const EdgeInsets.only(left: 8),
+              child: trailing!,
+            ),
+        ]),
+      ),
+    );
+  }
+}