dustin/Melo
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

UI-Politur: Kontrast, Abstaende, Typografie, Bewegung

Browse Source 
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
This commit is contained in:
Hermes (Server)
2026-08-21 12:40:25 +02:00
co-authored by Claude Opus 5
parent 2df85e650e
commit bc861f6087
23 changed files with 773 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/downloads/downloads_screen.dart
+7 -7
View File
@@ -153,7 +153,7 @@ class _ServerBrowserState extends State<_ServerBrowser> {
const Icon(Icons.cloud_off, size: 64, color: Colors.white24),
const SizedBox(height: 12),
const Text('Musikserver nicht verbunden',
style: TextStyle(color: Colors.white54)),
style: TextStyle(color: MeloTheme.text2)),
const SizedBox(height: 12),
const Text('Gehe zu Einstellungen → Navidrome zum Verbinden',
style: TextStyle(color: Colors.white30, fontSize: 12)),
@@ -183,7 +183,7 @@ class _ServerBrowserState extends State<_ServerBrowser> {
Text(
hatFehler ? 'Serverfehler: $_error' : 'Keine Alben geladen',
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.white54),
style: const TextStyle(color: MeloTheme.text2),
),
const SizedBox(height: 16),
FilledButton.icon(
@@ -489,7 +489,7 @@ class _YouTubeBereichState extends State<_YouTubeBereich> {
const Text(
'Der Downloader läuft über den Baka-Server. Dafür brauchst du '
'deine Baka-Anmeldung.',
style: TextStyle(color: Colors.white54, fontSize: 13),
style: TextStyle(color: MeloTheme.text2, fontSize: 13),
),
const SizedBox(height: 12),
FilledButton.icon(
@@ -500,11 +500,11 @@ class _YouTubeBereichState extends State<_YouTubeBereich> {
] else ...[
Row(
children: [
const Icon(Icons.verified_user, size: 18, color: Colors.white38),
const Icon(Icons.verified_user, size: 18, color: MeloTheme.text3),
const SizedBox(width: 8),
Expanded(
child: Text('Angemeldet als ${auth.benutzer}',
style: const TextStyle(color: Colors.white54, fontSize: 13)),
style: const TextStyle(color: MeloTheme.text2, fontSize: 13)),
),
TextButton(
onPressed: auth.abmelden,
@@ -564,12 +564,12 @@ class _YouTubeBereichState extends State<_YouTubeBereich> {
const LinearProgressIndicator(),
const SizedBox(height: 8),
Text(dienst.status ?? 'Läuft …',
style: const TextStyle(color: Colors.white54, fontSize: 12)),
style: const TextStyle(color: MeloTheme.text2, fontSize: 12)),
],
if (_meldung != null) ...[
const SizedBox(height: 16),
Text(_meldung!,
style: const TextStyle(color: Colors.white70, fontSize: 13)),
style: const TextStyle(color: MeloTheme.text2, fontSize: 13)),
],
],
);
lib/library/artist_list.dart
+2 -1
View File
@@ -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);
lib/library/category_list.dart
+2 -1
View File
@@ -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(
lib/library/favorites_screen.dart
+2 -1
View File
@@ -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)),
lib/library/music_recognition_sheet.dart
+6 -6
View File
@@ -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(),
],
lib/library/my_music_screen.dart
+16 -10
View File
@@ -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);
lib/library/search_screen.dart
+4 -3
View File
@@ -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);
lib/library/song_detail_sheet.dart
+11 -11
View File
@@ -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,
lib/player/mini_player.dart
+157 -87
View File
@@ -12,6 +12,9 @@ import 'now_playing_screen.dart';
class MiniPlayer extends StatelessWidget {
const MiniPlayer({super.key});
/// Höhe der Zeile ohne den Fortschrittsbalken.
static const double hoehe = 72;
@override
Widget build(BuildContext context) {
final handler = context.read<MeloAudioHandler>();
@@ -19,94 +22,161 @@ class MiniPlayer extends StatelessWidget {
stream: handler.mediaItem,
builder: (context, snapshot) {
final item = snapshot.data;
if (item == null) return const SizedBox.shrink();
return Material(
color: MeloTheme.surface,
child: InkWell(
onTap: () => Navigator.of(context).push(MaterialPageRoute(
builder: (_) => const NowPlayingScreen(),
)),
child: Column(
children: [
Expanded(
child: SizedBox(
height: 80,
child: Row(
children: [
const SizedBox(width: 12),
Padding(
padding: const EdgeInsets.all(8),
child: CoverImage(artUri: item.artUri, size: 64, radius: 8),
),
const SizedBox(width: 12),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(item.title,
maxLines: 1, overflow: TextOverflow.ellipsis,
style: const TextStyle(fontWeight: FontWeight.w600)),
Text(item.artist ?? 'Unbekannt',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: Colors.white54, fontSize: 12)),
],
),
),
StreamBuilder<PlaybackState>(
stream: handler.playbackState,
builder: (context, snap) {
final playing = snap.data?.playing ?? false;
return Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: const Icon(Icons.skip_previous),
onPressed: handler.skipToPrevious,
),
IconButton(
tooltip: playing ? 'Pause' : 'Abspielen',
icon: Icon(playing ? Icons.pause : Icons.play_arrow, size: 28),
onPressed: playing ? handler.pause : handler.play,
),
IconButton(
icon: const Icon(Icons.skip_next),
onPressed: handler.skipToNext,
),
],
);
},
),
const SizedBox(width: 8),
],
),
),
),
StreamBuilder<Duration?>(
stream: handler.durationStream,
builder: (context, dSnap) {
final duration = dSnap.data ?? Duration.zero;
return StreamBuilder<Duration>(
stream: handler.positionStream,
builder: (context, pSnap) {
final position = pSnap.data ?? Duration.zero;
return LinearProgressIndicator(
value: duration.inMilliseconds > 0
? (position.inMilliseconds / duration.inMilliseconds).clamp(0.0, 1.0)
: 0,
minHeight: 3,
backgroundColor: Colors.white12,
valueColor: const AlwaysStoppedAnimation(MeloTheme.red),
);
},
);
},
),
],
),
// Ein- und Ausblenden statt Aufpoppen: die Leiste kommt von unten
// dazu, wenn etwas startet.
return AnimatedSwitcher(
duration: MeloMotion.normal,
switchInCurve: MeloMotion.curve,
transitionBuilder: (kind, animation) => SizeTransition(
sizeFactor: animation,
alignment: Alignment.topCenter,
child: FadeTransition(opacity: animation, child: kind),
),
child: item == null
? const SizedBox.shrink()
: _Leiste(handler: handler, item: item),
);
},
);
}
}
class _Leiste extends StatelessWidget {
const _Leiste({required this.handler, required this.item});
final MeloAudioHandler handler;
final MediaItem item;
@override
Widget build(BuildContext context) {
final texte = Theme.of(context).textTheme;
return DecoratedBox(
decoration: const BoxDecoration(
color: MeloTheme.surface,
// Trennt die Leiste vom Inhalt darüber, ohne Schatten.
border: Border(top: BorderSide(color: MeloTheme.border)),
),
child: Material(
color: Colors.transparent,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
InkWell(
onTap: () => Navigator.of(context).push(MaterialPageRoute(
builder: (_) => const NowPlayingScreen(),
)),
child: SizedBox(
height: MiniPlayer.hoehe,
child: Row(
children: [
const SizedBox(width: MeloSpace.md),
CoverImage(artUri: item.artUri, size: 52),
const SizedBox(width: MeloSpace.md),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: texte.bodyLarge
?.copyWith(fontWeight: FontWeight.w600),
),
Text(
item.artist ?? 'Unbekannt',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: texte.bodySmall,
),
],
),
),
const SizedBox(width: MeloSpace.sm),
_Bedienung(handler: handler),
const SizedBox(width: MeloSpace.sm),
],
),
),
),
_Fortschritt(handler: handler),
],
),
),
);
}
}
class _Bedienung extends StatelessWidget {
const _Bedienung({required this.handler});
final MeloAudioHandler handler;
@override
Widget build(BuildContext context) {
return StreamBuilder<PlaybackState>(
stream: handler.playbackState,
builder: (context, snap) {
final laeuft = snap.data?.playing ?? false;
return Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
tooltip: 'Vorheriger Titel',
icon: const Icon(Icons.skip_previous),
onPressed: handler.skipToPrevious,
),
// Der wichtigste Knopf der Leiste: eingefärbt und größer, damit
// er sich ohne Hinsehen treffen lässt.
IconButton.filled(
tooltip: laeuft ? 'Pause' : 'Abspielen',
style: IconButton.styleFrom(
backgroundColor: MeloTheme.red,
foregroundColor: Colors.white,
minimumSize:
const Size(MeloTheme.minTouchTarget, MeloTheme.minTouchTarget),
),
icon: Icon(laeuft ? Icons.pause : Icons.play_arrow, size: 26),
onPressed: laeuft ? handler.pause : handler.play,
),
IconButton(
tooltip: 'Nächster Titel',
icon: const Icon(Icons.skip_next),
onPressed: handler.skipToNext,
),
],
);
},
);
}
}
class _Fortschritt extends StatelessWidget {
const _Fortschritt({required this.handler});
final MeloAudioHandler handler;
@override
Widget build(BuildContext context) {
return StreamBuilder<Duration?>(
stream: handler.durationStream,
builder: (context, dSnap) {
final dauer = dSnap.data ?? Duration.zero;
return StreamBuilder<Duration>(
stream: handler.positionStream,
builder: (context, pSnap) {
final position = pSnap.data ?? Duration.zero;
return LinearProgressIndicator(
value: dauer.inMilliseconds > 0
? (position.inMilliseconds / dauer.inMilliseconds)
.clamp(0.0, 1.0)
: 0,
minHeight: 2,
backgroundColor: MeloTheme.border,
valueColor: const AlwaysStoppedAnimation(MeloTheme.red),
);
},
);
},
);
lib/player/now_playing_screen.dart
+6 -6
View File
@@ -82,7 +82,7 @@ class NowPlayingScreen extends StatelessWidget {
const SizedBox(height: 8),
Text(
item.artist ?? 'Unbekannt',
style: const TextStyle(color: Colors.white54),
style: const TextStyle(color: MeloTheme.text2),
),
const SizedBox(height: 24),
_ProgressBar(handler: handler),
@@ -147,9 +147,9 @@ class _ProgressBar extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(_fmt(position),
style: const TextStyle(color: Colors.white54)),
style: const TextStyle(color: MeloTheme.text2)),
Text(_fmt(total),
style: const TextStyle(color: Colors.white54)),
style: const TextStyle(color: MeloTheme.text2)),
],
),
),
@@ -187,7 +187,7 @@ class _Controls extends StatelessWidget {
IconButton(
tooltip: 'Zufallswiedergabe',
icon: Icon(Icons.shuffle,
color: shuffle ? MeloTheme.red : Colors.white54),
color: shuffle ? MeloTheme.red : MeloTheme.text2),
onPressed: () => handler.setShuffleMode(shuffle
? AudioServiceShuffleMode.none
: AudioServiceShuffleMode.all),
@@ -218,7 +218,7 @@ class _Controls extends StatelessWidget {
? Icons.repeat_one
: Icons.repeat,
color: repeat == AudioServiceRepeatMode.none
? Colors.white54
? MeloTheme.text2
: MeloTheme.red,
),
onPressed: () => handler.setRepeatMode(switch (repeat) {
@@ -376,7 +376,7 @@ class _LyricsSheetState extends State<_LyricsSheet> {
: _text == null
? const Center(
child: Text('Kein Songtext verfügbar',
style: TextStyle(color: Colors.white54)),
style: TextStyle(color: MeloTheme.text2)),
)
: SingleChildScrollView(
padding: const EdgeInsets.all(16),
lib/player/queue_screen.dart
+1 -1
View File
@@ -27,7 +27,7 @@ class QueueScreen extends StatelessWidget {
if (queue.isEmpty) {
return const Center(
child: Text('Warteschlange ist leer',
style: TextStyle(color: Colors.white54)),
style: TextStyle(color: MeloTheme.text2)),
);
}
return StreamBuilder<MediaItem?>(
lib/playlists/playlist_detail_screen.dart
+3 -2
View File
@@ -8,6 +8,7 @@ import '../library/song_media.dart';
import '../player/audio_handler.dart';
import '../settings/app_settings.dart';
import '../shared/cover.dart';
import '../shared/theme.dart';
/// Playlist-Detailansicht: Songs anzeigen, per Drag & Drop umsortieren, entfernen.
class PlaylistDetailScreen extends StatelessWidget {
@@ -29,14 +30,14 @@ class PlaylistDetailScreen extends StatelessWidget {
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('Playlist ist leer — füge Songs aus der Bibliothek hinzu',
style: TextStyle(color: Colors.white54)),
style: TextStyle(color: MeloTheme.text2)),
);
}
return ReorderableListView.builder(
lib/playlists/playlists_screen.dart
+4 -4
View File
@@ -42,7 +42,7 @@ class PlaylistsScreen extends StatelessWidget {
if (snapshot.hasError) {
return Center(
child: Text('Fehler: ${snapshot.error}',
style: const TextStyle(color: Colors.white54)),
style: const TextStyle(color: MeloTheme.text2)),
);
}
final playlists = snapshot.data ?? const [];
@@ -135,10 +135,10 @@ class _Empty extends StatelessWidget {
children: [
Icon(Icons.playlist_play, size: 64, color: Colors.white24),
SizedBox(height: 12),
Text('Noch keine Playlisten', style: TextStyle(color: Colors.white54)),
Text('Noch keine Playlisten', style: TextStyle(color: MeloTheme.text2)),
SizedBox(height: 8),
Text('Tippe auf + um eine Playlist zu erstellen',
style: TextStyle(color: Colors.white38, fontSize: 12)),
style: TextStyle(color: MeloTheme.text3, fontSize: 12)),
],
),
);
@@ -160,7 +160,7 @@ class FavoritesListScreen extends StatelessWidget {
final songs = snapshot.data ?? const [];
if (songs.isEmpty) {
return const Center(
child: Text('Noch keine Favoriten', style: TextStyle(color: Colors.white54)),
child: Text('Noch keine Favoriten', style: TextStyle(color: MeloTheme.text2)),
);
}
return SongList(songs);
lib/settings/equalizer_screen.dart
+8 -8
View File
@@ -47,14 +47,14 @@ class EqualizerScreen extends StatelessWidget {
padding: EdgeInsets.only(top: 4, bottom: 12),
child: Row(
children: [
Icon(Icons.headphones, size: 14, color: Colors.white38),
Icon(Icons.headphones, size: 14, color: MeloTheme.text3),
SizedBox(width: 6),
Expanded(
child: Text(
'Kopfhörer aufsetzen, bevor du die Soundeffekte '
'einstellst',
style: TextStyle(
color: Colors.white38, fontSize: 12),
color: MeloTheme.text3, fontSize: 12),
),
),
],
@@ -86,7 +86,7 @@ class _NotAvailable extends StatelessWidget {
const Text(
'Der Equalizer ist erst verfügbar, wenn Musik läuft',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white54),
style: TextStyle(color: MeloTheme.text2),
),
if (error != null) ...[
const SizedBox(height: 8),
@@ -176,10 +176,10 @@ class _Bands extends StatelessWidget {
),
Text(band.label,
style:
const TextStyle(color: Colors.white54, fontSize: 11)),
const TextStyle(color: MeloTheme.text2, fontSize: 11)),
Text('${(band.level / 100).round()}',
style:
const TextStyle(color: Colors.white38, fontSize: 11)),
const TextStyle(color: MeloTheme.text3, fontSize: 11)),
],
),
),
@@ -249,9 +249,9 @@ class Knob extends StatelessWidget {
),
const SizedBox(height: 8),
Text(label,
style: const TextStyle(color: Colors.white54, fontSize: 12)),
style: const TextStyle(color: MeloTheme.text2, fontSize: 12)),
Text('${(value * 100).round()}',
style: const TextStyle(color: Colors.white38, fontSize: 11)),
style: const TextStyle(color: MeloTheme.text3, fontSize: 11)),
],
),
);
@@ -294,7 +294,7 @@ class _KnobPainter extends CustomPainter {
Paint()
..style = PaintingStyle.stroke
..strokeWidth = 1
..color = Colors.white12,
..color = MeloTheme.border,
);
final pointer = _start + _sweep * value;
lib/settings/settings_screen.dart
+9 -9
View File
@@ -163,9 +163,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
const _SectionLabel('Musikserver'),
ListTile(
leading: const Icon(Icons.cloud_circle),
title: const Text('🌐 Navidrome'),
title: const Text('Navidrome'),
subtitle: _navidrome.istVerbunden
? const Text('✅ Verbunden')
? const Text('Verbunden')
: const Text('Nicht verbunden'),
trailing: _navidrome.istVerbunden
? IconButton(
@@ -182,7 +182,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Text(
'💡 Tipp: Oder nutze Melo lokal ohne Server-Konto (nur deine Musik auf dem Gerät)',
style: TextStyle(fontSize: 12, color: Colors.white54),
style: TextStyle(fontSize: 12, color: MeloTheme.text2),
),
),
ListTile(
@@ -200,7 +200,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
),
ListTile(
leading: const Icon(Icons.storage),
title: const Text('🗄️ Cache-Speicher'),
title: const Text('Cache-Speicher'),
subtitle: Text(_formatBytes(_cacheSize)),
trailing: _cacheSize > 0
? IconButton(
@@ -212,7 +212,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
),
ListTile(
leading: const Icon(Icons.favorite),
title: const Text('🌟 Favoriten-Sync'),
title: const Text('Favoriten-Sync'),
subtitle: const Text('Favoriten vom Server importieren'),
trailing: IconButton(
tooltip: 'Vom Server laden',
@@ -222,7 +222,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
),
ListTile(
leading: const Icon(Icons.playlist_play),
title: const Text('📋 Playlisten-Sync'),
title: const Text('Playlisten-Sync'),
subtitle: const Text('Server-Playlisten importieren'),
trailing: IconButton(
tooltip: 'Vom Server laden',
@@ -268,7 +268,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
builder: (ctx) => StatefulBuilder(
builder: (ctx, setDialogState) => AlertDialog(
backgroundColor: Colors.grey.shade900,
title: const Text('🌐 Navidrome Login',
title: const Text('Navidrome-Anmeldung',
style: TextStyle(color: Colors.white, fontSize: 16)),
content: SingleChildScrollView(
child: Column(
@@ -284,7 +284,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
),
),
const SizedBox(height: 12),
const Text('Benutzer:', style: TextStyle(fontSize: 12, color: Colors.white70)),
const Text('Benutzer:', style: TextStyle(fontSize: 12, color: MeloTheme.text2)),
const SizedBox(height: 8),
Row(
children: [
@@ -489,7 +489,7 @@ class _SectionLabel extends StatelessWidget {
child: Text(
label,
style: const TextStyle(
color: Colors.white54,
color: MeloTheme.text2,
fontSize: 12,
fontWeight: FontWeight.bold,
),
lib/shared/cover.dart
+13 -2
View File
@@ -6,7 +6,12 @@ import 'theme.dart';
/// Cover-Bild aus einer file-URI, mit Noten-Platzhalter als Fallback.
class CoverImage extends StatelessWidget {
const CoverImage({super.key, required this.artUri, this.size, this.radius = 8});
const CoverImage({
super.key,
required this.artUri,
this.size,
this.radius = MeloRadius.element,
});
final Uri? artUri;
final double? size;
final double radius;
@@ -16,7 +21,13 @@ class CoverImage extends StatelessWidget {
final placeholder = Container(
width: size,
height: size,
color: MeloTheme.surface,
decoration: BoxDecoration(
color: MeloTheme.surface,
// Haarlinie statt Schatten: auf Schwarz trennt ein Umriss die
// Fläche sauber, ein Schatten wäre unsichtbar.
border: radius > 0 ? MeloTheme.hairline : null,
borderRadius: BorderRadius.circular(radius),
),
child: LayoutBuilder(
builder: (_, c) {
final s = size ?? (c.hasBoundedWidth ? c.maxWidth : 48.0);
lib/shared/favorite_button.dart
+1 -1
View File
@@ -21,7 +21,7 @@ class FavoriteButton extends StatelessWidget {
tooltip: isFavorite ? 'Favorit entfernen' : 'Zu Favoriten hinzufügen',
icon: Icon(
isFavorite ? Icons.favorite : Icons.favorite_border,
color: isFavorite ? MeloTheme.red : Colors.white54,
color: isFavorite ? MeloTheme.red : MeloTheme.text2,
),
onPressed: () => service.toggleFavorite(songId),
);
lib/shared/sub_tabs.dart
+69 -20
View File
@@ -1,7 +1,12 @@
import 'package:flutter/material.dart';
import 'theme.dart';
/// Unterreiter im Stil der Referenz-UI: der aktive Reiter ist eine helle
/// Pille, die übrigen sind nur Text.
///
/// Die Pille wechselt weich statt zu springen — so ist sichtbar, dass es
/// derselbe Reiter ist, der sich bewegt, und nicht ein neuer Bildschirm.
class SubTabs extends StatelessWidget {
const SubTabs({
super.key,
@@ -18,31 +23,17 @@ class SubTabs extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(12, 12, 12, 4),
padding: const EdgeInsets.fromLTRB(
MeloSpace.md, MeloSpace.sm, MeloSpace.md, MeloSpace.xs),
child: Row(
children: [
for (var i = 0; i < labels.length; i++)
Padding(
padding: const EdgeInsets.only(right: 8),
child: GestureDetector(
padding: const EdgeInsets.only(right: MeloSpace.sm),
child: _Reiter(
label: labels[i],
aktiv: i == index,
onTap: () => onChanged(i),
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 18, vertical: 9),
decoration: BoxDecoration(
color: i == index ? Colors.white : Colors.transparent,
borderRadius: BorderRadius.circular(20),
),
child: Text(
labels[i],
style: TextStyle(
color: i == index ? Colors.black : Colors.white70,
fontSize: 15,
fontWeight:
i == index ? FontWeight.w600 : FontWeight.w400,
),
),
),
),
),
],
@@ -50,3 +41,61 @@ class SubTabs extends StatelessWidget {
);
}
}
class _Reiter extends StatelessWidget {
const _Reiter({
required this.label,
required this.aktiv,
required this.onTap,
});
final String label;
final bool aktiv;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
return Semantics(
button: true,
selected: aktiv,
child: Material(
color: Colors.transparent,
borderRadius: BorderRadius.circular(MeloRadius.pill),
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: onTap,
child: AnimatedContainer(
duration: MeloMotion.fast,
curve: MeloMotion.curve,
// Volle 48 dp hoch: darunter trifft man den Reiter im Gehen nicht
// zuverlässig (Material 3, Mindestgröße für Bedienelemente).
constraints: const BoxConstraints(
minHeight: MeloTheme.minTouchTarget,
minWidth: MeloTheme.minTouchTarget,
),
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(horizontal: MeloSpace.md),
decoration: BoxDecoration(
color: aktiv ? Colors.white : Colors.transparent,
borderRadius: BorderRadius.circular(MeloRadius.pill),
// Der inaktive Reiter bleibt als Fläche erkennbar, ohne sich
// vorzudrängen — sonst schweben die Wörter im Nichts.
border: aktiv ? null : MeloTheme.hairline,
),
child: AnimatedDefaultTextStyle(
duration: MeloMotion.fast,
curve: MeloMotion.curve,
style: TextStyle(
color: aktiv ? MeloTheme.black : MeloTheme.text2,
fontSize: 15,
height: 1.2,
fontWeight: aktiv ? FontWeight.w600 : FontWeight.w500,
),
child: Text(label),
),
),
),
),
);
}
}
lib/shared/theme.dart
+144 -1
View File
@@ -1,5 +1,53 @@
import 'package:flutter/material.dart';
/// Abstände. Alles Sichtbare rastet auf 8 ein (4 nur für Feinheiten
/// innerhalb eines Elements) — daher wirken Listen und Karten ruhig,
/// obwohl nirgends eine Zahl von Hand gewählt wurde.
abstract final class MeloSpace {
/// 4 — innerhalb eines Elements (Icon zu Text).
static const double xs = 4;
/// 8 — zwischen eng zusammengehörenden Elementen.
static const double sm = 8;
/// 16 — Standard: Seitenrand, Innenabstand einer Karte.
static const double md = 16;
/// 24 — zwischen Abschnitten.
static const double lg = 24;
/// 32 — vor einer neuen Überschrift.
static const double xl = 32;
}
/// Eckenradien. Je größer die Fläche, desto größer die Rundung — sonst
/// wirken große Karten kantig und kleine Chips aufgeblasen.
abstract final class MeloRadius {
/// 8 — Coverbilder, kleine Flächen.
static const double element = 8;
/// 12 — Karten.
static const double card = 12;
/// 20 — Sheets von unten.
static const double sheet = 20;
/// Pille — Reiter und Chips.
static const double pill = 999;
}
/// Bewegung. Ruhig und kurz: Übergänge sollen die Verbindung zwischen zwei
/// Zuständen zeigen, nicht auf sich aufmerksam machen.
abstract final class MeloMotion {
/// 120 ms — Reaktion auf eine Berührung (Farbe, Skalierung).
static const Duration fast = Duration(milliseconds: 120);
/// 220 ms — Wechsel eines Inhalts.
static const Duration normal = Duration(milliseconds: 220);
static const Curve curve = Curves.easeOutCubic;
}
/// Melo-Theme: Schwarz + Rot.
class MeloTheme {
static const Color red = Color(0xFFC0392B);
@@ -9,6 +57,56 @@ class MeloTheme {
/// Etwas hellere Fläche für Karten und Chips auf [surface].
static const Color surfaceHigh = Color(0xFF1F1F29);
// === Textfarben ===
// Die Werte sind nicht geschätzt: jede erfüllt auf der hellsten Fläche
// ([surfaceHigh]) mindestens 4,5:1 nach WCAG. Siehe theme_kontrast_test.dart,
// der die Verhältnisse nachrechnet.
/// Titel und alles, was zuerst gelesen wird.
static const Color text1 = Colors.white;
/// Zweite Ebene: Künstler, Untertitel.
static const Color text2 = Color(0xB8FFFFFF); // 72 %
/// Dritte Ebene: Anzahl, Zeitangabe, Hinweis. Untere Grenze für Text —
/// darunter ist der Kontrast nicht mehr ausreichend.
static const Color text3 = Color(0x80FFFFFF); // 50 %
/// Trennlinien und Umrisse. Kein Text — hier gilt 4,5:1 nicht.
static const Color border = Color(0x14FFFFFF); // 8 %
/// Die kleinste Fläche, die sich noch sicher treffen lässt (Material 3).
static const double minTouchTarget = 48;
/// Umriss statt Schlagschatten: auf Schwarz trennt eine Haarlinie
/// Flächen sauberer als ein Schatten, den man ohnehin nicht sieht.
static Border get hairline => Border.all(color: border, width: 1);
static TextTheme get _textTheme => const TextTheme(
// Bildschirm-Überschrift ("Meine Musik", "Online").
displaySmall: TextStyle(
fontSize: 28, height: 1.15, fontWeight: FontWeight.w700, color: text1),
// Titelleiste, Kopf eines Sheets.
headlineSmall: TextStyle(
fontSize: 22, height: 1.2, fontWeight: FontWeight.w700, color: text1),
// Hervorgehobene Zeile ("Shuffle-Wiedergabe").
titleMedium: TextStyle(
fontSize: 17, height: 1.3, fontWeight: FontWeight.w600, color: text1),
// Titel in einer Liste.
bodyLarge: TextStyle(fontSize: 15, height: 1.4, color: text1),
// Untertitel in einer Liste.
bodyMedium: TextStyle(fontSize: 13, height: 1.35, color: text2),
// Beiwerk: Anzahl, Dauer.
bodySmall: TextStyle(fontSize: 12, height: 1.3, color: text3),
// Abschnitts-Beschriftung, Knopftext.
labelLarge: TextStyle(
fontSize: 12,
height: 1.2,
fontWeight: FontWeight.w600,
letterSpacing: 0.4,
color: text3),
);
static ThemeData get dark {
final scheme = ColorScheme.fromSeed(
seedColor: red,
@@ -16,22 +114,67 @@ class MeloTheme {
).copyWith(
primary: red,
surface: black,
outline: border,
);
return ThemeData(
useMaterial3: true,
colorScheme: scheme,
scaffoldBackgroundColor: black,
cardColor: surface,
textTheme: _textTheme,
splashFactory: InkSparkle.splashFactory,
appBarTheme: const AppBarTheme(
backgroundColor: black,
surfaceTintColor: Colors.transparent,
centerTitle: false,
titleTextStyle: TextStyle(
fontSize: 22, height: 1.2, fontWeight: FontWeight.w700, color: text1),
),
listTileTheme: const ListTileThemeData(
contentPadding: EdgeInsets.symmetric(horizontal: MeloSpace.md),
minVerticalPadding: MeloSpace.sm,
iconColor: text2,
),
dividerTheme: const DividerThemeData(
color: border,
space: 1,
thickness: 1,
),
iconTheme: const IconThemeData(color: text2),
sliderTheme: const SliderThemeData(
activeTrackColor: red,
thumbColor: red,
inactiveTrackColor: border,
trackHeight: 3,
),
progressIndicatorTheme: const ProgressIndicatorThemeData(
color: red,
linearTrackColor: border,
),
snackBarTheme: SnackBarThemeData(
backgroundColor: surfaceHigh,
contentTextStyle: const TextStyle(color: text1, fontSize: 14),
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(MeloRadius.element),
),
),
bottomSheetTheme: const BottomSheetThemeData(
backgroundColor: surface,
surfaceTintColor: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.vertical(top: Radius.circular(MeloRadius.sheet)),
),
),
bottomNavigationBarTheme: const BottomNavigationBarThemeData(
backgroundColor: surface,
selectedItemColor: red,
unselectedItemColor: Colors.white54,
unselectedItemColor: text3,
type: BottomNavigationBarType.fixed,
selectedLabelStyle:
TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
unselectedLabelStyle: TextStyle(fontSize: 12),
),
);
}