- Design-System: MeloDesignTokens ThemeExtension, Outfit-Font, Farben #0B0B10/#14141C/#1C1C26 - Akzentfarbe-User-Einstellung behalten (MeloTheme.akzentNotifier), Gradient aus Akzent - Startseite: Hero-Weiterhören-Karte mit Cover, Titel, Glow-Play-Button - 2-stufige Einstellungen: Standard + Expertenmodus (SharedPreferences Key 'experten_modus') - Komponenten: Pill-Buttons (radius 999), Card-Radius 20, Glow-Shadow, PressScale-Widget - Login: Gradient-Button mit Akzent-Glow - 199 Tests grün (194 bestehend + 5 neu): ThemeExtension, Expertenmodus, Akzent, PressScale, Hero - flutter analyze lib/ + test/ = 0 Issues - KEIN APK
77 lines
2.9 KiB
Dart
77 lines
2.9 KiB
Dart
import 'package:flutter/material.dart';
|
|
import '../models/song.dart';
|
|
import '../utils/farb_theme.dart';
|
|
|
|
/// Zeigt die letzten abgespielten Songs als horizontale Liste.
|
|
class RecentWidget extends StatelessWidget {
|
|
final List<Song> songs;
|
|
final void Function(Song) onPlay;
|
|
|
|
const RecentWidget({super.key, required this.songs, required this.onPlay});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
if (songs.isEmpty) return const SizedBox.shrink();
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text('🕐 Zuletzt gehört',
|
|
style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: Colors.white70)),
|
|
const SizedBox(height: 8),
|
|
SizedBox(
|
|
height: 52,
|
|
child: ListView.separated(
|
|
scrollDirection: Axis.horizontal,
|
|
itemCount: songs.length,
|
|
separatorBuilder: (_, __) => const SizedBox(width: 8),
|
|
itemBuilder: (_, i) => GestureDetector(
|
|
onTap: () => onPlay(songs[i]),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10),
|
|
decoration: BoxDecoration(
|
|
color: MeloTheme.dunkel1,
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(color: MeloTheme.dunkel2),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
width: 28, height: 28,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(8),
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
MeloTheme.akzent.withValues(alpha: 0.4),
|
|
MeloTheme.akzent.withValues(alpha: 0.1),
|
|
],
|
|
),
|
|
),
|
|
child: const Center(child: Text('♪', style: TextStyle(fontSize: 12))),
|
|
),
|
|
const SizedBox(width: 6),
|
|
Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(songs[i].titel,
|
|
style: const TextStyle(fontSize: 11, fontWeight: FontWeight.w500, color: Colors.white)),
|
|
Text(songs[i].kuenstler,
|
|
style: const TextStyle(fontSize: 9, color: MeloTheme.textSekundaer)),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|