Files
Melo/lib/library/my_music_screen.dart
Hermes (Server)andClaude Opus 5 bc861f6087 UI-Politur: Kontrast, Abstaende, Typografie, Bewegung
Kein Redesign — Schwarz/Rot, 4 Tabs und Lieder/Kategorie bleiben. Grundlage
sind die Design-Skills: ui-ux-pro-max (Barrierefreiheit, Touch, Typografie,
Bewegung), ui-design/mobile-android (Material 3) und die Token-Disziplin
aus Hue.

Behobene Maengel (messbar, nicht Geschmack):
- Text in Colors.white38 an 17 Stellen = 3,4:1 Kontrast, WCAG verlangt
  4,5:1. Ersetzt durch drei benannte Stufen (text1 15,9:1 / text2 8,8:1 /
  text3 4,9:1). theme_kontrast_test.dart rechnet die Verhaeltnisse bei
  jedem Lauf nach, statt sie zu behaupten.
- SubTabs waren ~38 dp hoch (Material 3 verlangt 48), ohne Ripple und ohne
  Uebergang. Jetzt 48 dp, InkWell, AnimatedContainer, und die Auswahl wird
  Vorlesehilfen als Zustand gemeldet (Semantics.selected).
- mini_player.dart: Expanded UM eine feste Hoehe herum — zwei
  widerspruechliche Angaben. Entschaerft.
- Emoji in Bedienelementen der Einstellungen (jeweils neben einem echten
  Icon) entfernt.

Neu in shared/theme.dart: MeloSpace (8er-Raster), MeloRadius, MeloMotion,
Farbrollen text1/2/3 + border + hairline, minTouchTarget, vollstaendiges
textTheme (7 Stufen) und Themes fuer Listen, Sheets, Snackbars,
Fortschritt, Trenner.

318 Tests gruen (23 neue, 1 uebersprungen), flutter analyze ohne Befund.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FpPu4nuKjKKeX1RpdDeX81
2026-08-21 12:40:25 +02:00

370 lines
12 KiB
Dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../playlists/playlists_screen.dart';
import '../settings/settings_screen.dart';
import '../shared/cover.dart';
import '../shared/sort_store.dart';
import '../shared/sub_tabs.dart';
import '../shared/sortable_song_list.dart';
import '../shared/theme.dart';
import 'category_list.dart';
import 'artist_list.dart';
import 'database.dart';
import 'library_service.dart';
import 'music_recognition_sheet.dart';
import 'permissions.dart';
import 'song_list.dart';
/// Startbildschirm: Kopfzeile mit Einstellungen/Suche/Musikerkennung,
/// Schnellzugriffe, Unterreiter (Lieder/Kategorie/Künstler) und darunter der
/// jeweilige Inhalt. Bewusst ohne AppBar — die Kopfzeile ist Teil des Inhalts.
class MyMusicScreen extends StatefulWidget {
const MyMusicScreen({super.key, this.onSearchTap, this.onFavoritesTap});
/// Wechselt zum Suche-Tab; die Suche ist ein eigener Tab, kein eigener Screen.
final VoidCallback? onSearchTap;
/// Wechselt zum Favoriten-Tab.
final VoidCallback? onFavoritesTap;
@override
State<MyMusicScreen> createState() => _MyMusicScreenState();
}
class _MyMusicScreenState extends State<MyMusicScreen> {
/// 0 = Lieder, 1 = Kategorie, 2 = Künstler.
int _subTab = 0;
@override
Widget build(BuildContext context) {
final db = context.read<MeloDb>();
final lib = context.watch<LibraryService>();
return SafeArea(
bottom: false,
child: Column(
children: [
_Header(onSearchTap: widget.onSearchTap),
if (lib.permissionDenied)
MaterialBanner(
backgroundColor: Colors.red.shade900,
content: const Text('Zugriff auf Musik verweigert. '
'Bitte in den Einstellungen erlauben.'),
actions: [
TextButton(
onPressed: openMusicPermissionSettings,
child: const Text('Einstellungen'),
),
],
),
if (lib.scanError != null)
MaterialBanner(
backgroundColor: Colors.red.shade900,
content: Text(lib.scanError!),
actions: [
TextButton(
onPressed: lib.dismissScanError,
child: const Text('Verwerfen'),
),
],
),
if (lib.scanning)
Padding(
padding: const EdgeInsets.all(12),
child: Column(
children: [
const LinearProgressIndicator(),
const SizedBox(height: 6),
Text(
'Scanne … ${lib.scanDone}'
'${lib.scanTotal > 0 ? ' / ${lib.scanTotal}' : ''}',
style: const TextStyle(color: MeloTheme.text2, fontSize: 12),
),
],
),
),
_QuickAccessRow(onFavoritesTap: widget.onFavoritesTap),
SubTabs(
labels: const ['Lieder', 'Kategorie', 'Künstler'],
index: _subTab,
onChanged: (i) => setState(() => _subTab = i),
),
Expanded(
child: switch (_subTab) {
1 => const CategoryListScreen(),
2 => const ArtistListScreen(),
_ => StreamBuilder<List<Song>>(
stream: db.watchSongs(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return Center(
child: Text('Fehler: ${snapshot.error}',
style: const TextStyle(color: MeloTheme.text2)),
);
}
final songs = snapshot.data ?? const <Song>[];
return SortableSongList(
songs: songs,
storeKey: SortStore.meineMusik,
empty:
lib.scanning ? const SizedBox.shrink() : const _Empty(),
);
},
),
},
),
],
),
);
}
}
/// Einstellungen · Suchfeld · Musikerkennung.
class _Header extends StatelessWidget {
const _Header({this.onSearchTap});
final VoidCallback? onSearchTap;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 8, 4),
child: Row(
children: [
IconButton(
tooltip: 'Einstellungen',
icon: const Icon(Icons.tune),
onPressed: () => Navigator.of(context).push(
MaterialPageRoute(builder: (_) => const SettingsScreen()),
),
),
Expanded(
child: InkWell(
onTap: onSearchTap,
borderRadius: BorderRadius.circular(24),
child: Container(
height: 44,
decoration: BoxDecoration(
color: MeloTheme.surfaceHigh,
borderRadius: BorderRadius.circular(24),
),
child: const Row(
children: [
SizedBox(width: 14),
Icon(Icons.search, color: MeloTheme.text2, size: 20),
SizedBox(width: 10),
Text(
'Titel, Künstler und Alben suchen',
style: TextStyle(color: MeloTheme.text2, fontSize: 14),
),
],
),
),
),
),
IconButton(
tooltip: 'Musik erkennen',
icon: const Icon(Icons.help_outline),
onPressed: () => MusicRecognitionSheet.show(context),
),
],
),
);
}
}
/// Waagerecht scrollende Schnellzugriffe (Favoriten, Wiedergabelisten, …).
class _QuickAccessRow extends StatelessWidget {
const _QuickAccessRow({this.onFavoritesTap});
final VoidCallback? onFavoritesTap;
@override
Widget build(BuildContext context) {
final db = context.read<MeloDb>();
return SizedBox(
height: 104,
child: ListView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 12),
children: [
StreamBuilder<List<Song>>(
stream: db.watchFavorites(),
builder: (context, snapshot) {
final favorites = snapshot.data ?? const <Song>[];
return _QuickCard(
icon: Icons.favorite,
label: 'Favoriten',
subtitle: '${favorites.length} Songs',
coverPath: favorites.isEmpty ? null : favorites.first.coverPath,
onTap: onFavoritesTap,
);
},
),
StreamBuilder<List<Playlist>>(
stream: db.watchPlaylists(),
builder: (context, snapshot) {
final playlists = snapshot.data ?? const <Playlist>[];
return _QuickCard(
icon: Icons.queue_music,
label: 'Wiedergabelisten',
subtitle: '${playlists.length} Listen',
onTap: () => Navigator.of(context).push(
MaterialPageRoute(builder: (_) => const PlaylistsScreen()),
),
);
},
),
StreamBuilder<List<Song>>(
stream: db.watchRecent(limit: 50),
builder: (context, snapshot) {
final recent = snapshot.data ?? const <Song>[];
return _QuickCard(
icon: Icons.schedule,
label: 'Zuletzt',
subtitle: 'Neu hinzugefügt',
coverPath: recent.isEmpty ? null : recent.first.coverPath,
onTap: () => Navigator.of(context).push(
MaterialPageRoute(builder: (_) => const RecentlyAddedScreen()),
),
);
},
),
],
),
);
}
}
class _QuickCard extends StatelessWidget {
const _QuickCard({
required this.icon,
required this.label,
this.subtitle,
this.coverPath,
this.onTap,
});
final IconData icon;
final String label;
final String? subtitle;
final String? coverPath;
final VoidCallback? onTap;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: MeloSpace.xs, vertical: MeloSpace.sm),
child: SizedBox(
width: 150,
child: Material(
color: MeloTheme.surfaceHigh,
clipBehavior: Clip.antiAlias,
// Umriss statt Schatten — siehe MeloTheme.hairline.
// shape statt borderRadius: Material verträgt nur eines von beiden.
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(MeloRadius.card),
side: const BorderSide(color: MeloTheme.border),
),
child: InkWell(
onTap: onTap,
child: Stack(
fit: StackFit.expand,
children: [
if (coverPath != null)
Opacity(
opacity: 0.35,
child: CoverImage(
artUri: Uri.file(coverPath!),
size: 150,
radius: 0,
),
),
Padding(
padding: const EdgeInsets.all(MeloSpace.sm + MeloSpace.xs),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(icon, size: 22, color: Colors.white),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(label,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontWeight: FontWeight.w600, fontSize: 14)),
if (subtitle != null)
Text(subtitle!,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: MeloTheme.text2, fontSize: 11)),
],
),
],
),
),
],
),
),
),
),
);
}
}
/// Leerer Zustand mit direktem Weg zum Ordner-Scan.
class _Empty extends StatelessWidget {
const _Empty();
@override
Widget build(BuildContext context) {
final lib = context.read<LibraryService>();
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.library_music, size: 64, color: Colors.white24),
const SizedBox(height: 12),
const Text('Noch keine Musik',
style: TextStyle(color: MeloTheme.text2)),
const SizedBox(height: 16),
FilledButton.icon(
icon: const Icon(Icons.create_new_folder_outlined),
label: Text(addMusicLabel),
onPressed: lib.pickFolderAndScan,
),
],
),
);
}
}
/// Vollbild-Liste der zuletzt hinzugefügten Songs (Schnellzugriff "Zuletzt").
class RecentlyAddedScreen extends StatelessWidget {
const RecentlyAddedScreen({super.key});
@override
Widget build(BuildContext context) {
final db = context.read<MeloDb>();
return Scaffold(
appBar: AppBar(title: const Text('Zuletzt hinzugefügt')),
body: StreamBuilder<List<Song>>(
stream: db.watchRecent(limit: 100),
builder: (context, snapshot) {
final songs = snapshot.data ?? const <Song>[];
if (songs.isEmpty) {
return const Center(
child: Text('Noch nichts hinzugefügt',
style: TextStyle(color: MeloTheme.text2)),
);
}
return SongList(songs);
},
),
);
}
}