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
parent 2df85e650e
commit bc861f6087
23 changed files with 773 additions and 184 deletions
@@ -4,6 +4,7 @@ import 'package:provider/provider.dart';
 import 'database.dart';
 import 'song_grouping.dart';
 import 'song_list.dart';
+import '../shared/theme.dart';

 /// Bibliotheks-Tab: Künstler-Übersicht, gruppiert aus [MeloDb.watchSongs].
 class ArtistListScreen extends StatelessWidget {
@@ -18,7 +19,7 @@ class ArtistListScreen extends StatelessWidget {
        final songs = snapshot.data ?? const [];
        if (songs.isEmpty) {
          return const Center(
-            child: Text('Keine Künstler', style: TextStyle(color: Colors.white54)),
+            child: Text('Keine Künstler', style: TextStyle(color: MeloTheme.text2)),
          );
        }
        final grouped = groupByArtist(songs);
@@ -7,6 +7,7 @@ import 'categories.dart';
 import 'category_service.dart';
 import 'database.dart';
 import 'song_list.dart';
+import '../shared/theme.dart';

 /// Bibliotheks-Reiter „Kategorie": alle Kategorien der Bibliothek.
 ///
@@ -29,7 +30,7 @@ class CategoryListScreen extends StatelessWidget {
        if (songs.isEmpty) {
          return const Center(
            child: Text('Keine Kategorien',
-                style: TextStyle(color: Colors.white54)),
+                style: TextStyle(color: MeloTheme.text2)),
          );
        }
        final grouped = groupByCategory(
@@ -4,6 +4,7 @@ import 'package:provider/provider.dart';
 import '../shared/sort_store.dart';
 import '../shared/sortable_song_list.dart';
 import 'database.dart';
+import '../shared/theme.dart';

 /// Favoriten-Tab: Shuffle-Wiedergabe und dieselbe Sortierung wie "Meine Musik",
 /// nur auf den favorisierten Songs.
@@ -55,7 +56,7 @@ class _Empty extends StatelessWidget {
        children: [
          Icon(Icons.favorite_border, size: 64, color: Colors.white24),
          SizedBox(height: 12),
-          Text('Noch keine Favoriten', style: TextStyle(color: Colors.white54)),
+          Text('Noch keine Favoriten', style: TextStyle(color: MeloTheme.text2)),
          SizedBox(height: 6),
          Text('Tippe in einer Liederliste auf das Herz.',
              style: TextStyle(color: Colors.white30, fontSize: 12)),
@@ -86,7 +86,7 @@ class _MusicRecognitionSheetState extends State<MusicRecognitionSheet> {
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text('ACRCloud-Zugang (steht in deinen Notizen)',
-                  style: TextStyle(color: Colors.white70, fontSize: 12)),
+                  style: TextStyle(color: MeloTheme.text2, fontSize: 12)),
              const SizedBox(height: 12),
              TextField(
                controller: accessCtrl,
@@ -226,7 +226,7 @@ class _MusicRecognitionSheetState extends State<MusicRecognitionSheet> {
              const Icon(Icons.mic, color: MeloTheme.red, size: 64),
              const SizedBox(height: 16),
              const Text('Ich höre zu …',
-                  style: TextStyle(color: Colors.white70)),
+                  style: TextStyle(color: MeloTheme.text2)),
              const SizedBox(height: 8),
              Text('$_restSekunden',
                  style: const TextStyle(
@@ -240,7 +240,7 @@ class _MusicRecognitionSheetState extends State<MusicRecognitionSheet> {
              CircularProgressIndicator(color: MeloTheme.red),
              SizedBox(height: 16),
              Text('Ich suche den Titel …',
-                  style: TextStyle(color: Colors.white70)),
+                  style: TextStyle(color: MeloTheme.text2)),
            ],
          ),
        _Phase.ergebnis => _treffer == null
@@ -258,13 +258,13 @@ class _MusicRecognitionSheetState extends State<MusicRecognitionSheet> {
                  Text(_treffer!.kuenstler,
                      textAlign: TextAlign.center,
                      style: const TextStyle(
-                          fontSize: 16, color: Colors.white70)),
+                          fontSize: 16, color: MeloTheme.text2)),
                  if (_treffer!.album.isNotEmpty) ...[
                    const SizedBox(height: 4),
                    Text(_treffer!.album,
                        textAlign: TextAlign.center,
                        style: const TextStyle(
-                            fontSize: 13, color: Colors.white38)),
+                            fontSize: 13, color: MeloTheme.text3)),
                  ],
                  const SizedBox(height: 20),
                  _nochmalKnopf(),
@@ -280,7 +280,7 @@ class _MusicRecognitionSheetState extends State<MusicRecognitionSheet> {
          const SizedBox(height: 16),
          Text(text,
              textAlign: TextAlign.center,
-              style: const TextStyle(color: Colors.white70)),
+              style: const TextStyle(color: MeloTheme.text2)),
          const SizedBox(height: 20),
          _nochmalKnopf(),
        ],
@@ -78,7 +78,7 @@ class _MyMusicScreenState extends State<MyMusicScreen> {
                  Text(
                    'Scanne … ${lib.scanDone}'
                    '${lib.scanTotal > 0 ? ' / ${lib.scanTotal}' : ''}',
-                    style: const TextStyle(color: Colors.white54, fontSize: 12),
+                    style: const TextStyle(color: MeloTheme.text2, fontSize: 12),
                  ),
                ],
              ),
@@ -99,7 +99,7 @@ class _MyMusicScreenState extends State<MyMusicScreen> {
                    if (snapshot.hasError) {
                      return Center(
                        child: Text('Fehler: ${snapshot.error}',
-                            style: const TextStyle(color: Colors.white54)),
+                            style: const TextStyle(color: MeloTheme.text2)),
                      );
                    }
                    final songs = snapshot.data ?? const <Song>[];
@@ -150,11 +150,11 @@ class _Header extends StatelessWidget {
                child: const Row(
                  children: [
                    SizedBox(width: 14),
-                    Icon(Icons.search, color: Colors.white54, size: 20),
+                    Icon(Icons.search, color: MeloTheme.text2, size: 20),
                    SizedBox(width: 10),
                    Text(
                      'Titel, Künstler und Alben suchen',
-                      style: TextStyle(color: Colors.white54, fontSize: 14),
+                      style: TextStyle(color: MeloTheme.text2, fontSize: 14),
                    ),
                  ],
                ),
@@ -252,13 +252,19 @@ class _QuickCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
+      padding: const EdgeInsets.symmetric(
+          horizontal: MeloSpace.xs, vertical: MeloSpace.sm),
      child: SizedBox(
        width: 150,
        child: Material(
          color: MeloTheme.surfaceHigh,
-          borderRadius: BorderRadius.circular(12),
          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(
@@ -274,7 +280,7 @@ class _QuickCard extends StatelessWidget {
                    ),
                  ),
                Padding(
-                  padding: const EdgeInsets.all(10),
+                  padding: const EdgeInsets.all(MeloSpace.sm + MeloSpace.xs),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -294,7 +300,7 @@ class _QuickCard extends StatelessWidget {
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                style: const TextStyle(
-                                    color: Colors.white54, fontSize: 11)),
+                                    color: MeloTheme.text2, fontSize: 11)),
                        ],
                      ),
                    ],
@@ -323,7 +329,7 @@ class _Empty extends StatelessWidget {
          const Icon(Icons.library_music, size: 64, color: Colors.white24),
          const SizedBox(height: 12),
          const Text('Noch keine Musik',
-              style: TextStyle(color: Colors.white54)),
+              style: TextStyle(color: MeloTheme.text2)),
          const SizedBox(height: 16),
          FilledButton.icon(
            icon: const Icon(Icons.create_new_folder_outlined),
@@ -352,7 +358,7 @@ class RecentlyAddedScreen extends StatelessWidget {
          if (songs.isEmpty) {
            return const Center(
              child: Text('Noch nichts hinzugefügt',
-                  style: TextStyle(color: Colors.white54)),
+                  style: TextStyle(color: MeloTheme.text2)),
            );
          }
          return SongList(songs);
@@ -3,6 +3,7 @@ import 'package:provider/provider.dart';

 import 'database.dart';
 import 'song_list.dart';
+import '../shared/theme.dart';

 class SearchScreen extends StatefulWidget {
  const SearchScreen({super.key});
@@ -32,7 +33,7 @@ class _SearchScreenState extends State<SearchScreen> {
      body: _query.isEmpty
          ? const Center(
              child: Text('Suchbegriff eingeben',
-                  style: TextStyle(color: Colors.white54)),
+                  style: TextStyle(color: MeloTheme.text2)),
            )
          : StreamBuilder<List<Song>>(
              stream: db.searchSongs(_query),
@@ -40,14 +41,14 @@ class _SearchScreenState extends State<SearchScreen> {
                if (snapshot.hasError) {
                  return Center(
                    child: Text('Fehler: ${snapshot.error}',
-                        style: const TextStyle(color: Colors.white54)),
+                        style: const TextStyle(color: MeloTheme.text2)),
                  );
                }
                final songs = snapshot.data ?? const [];
                if (songs.isEmpty) {
                  return const Center(
                    child: Text('Nichts gefunden',
-                        style: TextStyle(color: Colors.white54)),
+                        style: TextStyle(color: MeloTheme.text2)),
                  );
                }
                return SongList(songs);
@@ -62,12 +62,12 @@ class SongDetailSheet extends StatelessWidget {
                              fontSize: 18, fontWeight: FontWeight.w700)),
                      const SizedBox(height: 4),
                      Text(song.artist ?? 'Unbekannter Künstler',
-                          style: const TextStyle(color: Colors.white70)),
+                          style: const TextStyle(color: MeloTheme.text2)),
                      if (song.album != null) ...[
                        const SizedBox(height: 2),
                        Text(song.album!,
                            style: const TextStyle(
-                                color: Colors.white38, fontSize: 12)),
+                                color: MeloTheme.text3, fontSize: 12)),
                      ],
                    ],
                  ),
@@ -89,7 +89,7 @@ class SongDetailSheet extends StatelessWidget {
            ),
            if (names.isEmpty)
              const Text('Keine Kategorie',
-                  style: TextStyle(color: Colors.white38, fontSize: 13))
+                  style: TextStyle(color: MeloTheme.text3, fontSize: 13))
            else
              Wrap(
                spacing: 8,
@@ -143,7 +143,7 @@ class _ExpertSection extends StatelessWidget {
        title: const Text('Expertenmodus',
            style: TextStyle(fontWeight: FontWeight.w600)),
        subtitle: const Text('Weitere Metadaten',
-            style: TextStyle(color: Colors.white38, fontSize: 12)),
+            style: TextStyle(color: MeloTheme.text3, fontSize: 12)),
        children: [
          _Row('Titel', song.title),
          _Row('Künstler', song.artist ?? '—'),
@@ -246,10 +246,10 @@ class _OnlineLookupState extends State<_OnlineLookup> {
        ),
        if (vorschlaege != null && vorschlaege.isEmpty)
          const Text('Nichts gefunden',
-              style: TextStyle(color: Colors.white38, fontSize: 13)),
+              style: TextStyle(color: MeloTheme.text3, fontSize: 13)),
        if (vorschlaege != null && vorschlaege.isNotEmpty) ...[
          const Text('Tippen übernimmt Titel, Künstler und Album',
-              style: TextStyle(color: Colors.white38, fontSize: 12)),
+              style: TextStyle(color: MeloTheme.text3, fontSize: 12)),
          for (final vorschlag in vorschlaege)
            ListTile(
              contentPadding: EdgeInsets.zero,
@@ -260,7 +260,7 @@ class _OnlineLookupState extends State<_OnlineLookup> {
                [vorschlag.kuenstler, vorschlag.album]
                    .where((t) => t.isNotEmpty)
                    .join(' — '),
-                style: const TextStyle(color: Colors.white38, fontSize: 12),
+                style: const TextStyle(color: MeloTheme.text3, fontSize: 12),
              ),
              onTap: () => _uebernehmen(vorschlag),
            ),
@@ -285,7 +285,7 @@ class _Row extends StatelessWidget {
          SizedBox(
            width: 110,
            child: Text(label,
-                style: const TextStyle(color: Colors.white38, fontSize: 13)),
+                style: const TextStyle(color: MeloTheme.text3, fontSize: 13)),
          ),
          Expanded(
            child: Text(value, style: const TextStyle(fontSize: 13)),
@@ -368,12 +368,12 @@ class _CategoryEditorState extends State<_CategoryEditor> {
          children: [
            const Text(
              'Die erste Kategorie liefert das Coverbild.',
-              style: TextStyle(color: Colors.white38, fontSize: 12),
+              style: TextStyle(color: MeloTheme.text3, fontSize: 12),
            ),
            const SizedBox(height: 12),
            if (_names.isEmpty)
              const Text('Noch keine Kategorie',
-                  style: TextStyle(color: Colors.white38, fontSize: 13))
+                  style: TextStyle(color: MeloTheme.text3, fontSize: 13))
            else
              Wrap(
                spacing: 8,
@@ -399,7 +399,7 @@ class _CategoryEditorState extends State<_CategoryEditor> {
            if (offen.isNotEmpty) ...[
              const SizedBox(height: 12),
              const Text('Bereits vergeben',
-                  style: TextStyle(color: Colors.white38, fontSize: 12)),
+                  style: TextStyle(color: MeloTheme.text3, fontSize: 12)),
              const SizedBox(height: 4),
              Wrap(
                spacing: 8,