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
This commit is contained in:
Hermes (Server)
co-authored by
Claude Opus 5
Claude Opus 5
parent
2df85e650e
commit
bc861f6087
+157
-87
@@ -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),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
@@ -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),
|
||||
|
||||
@@ -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?>(
|
||||
|
||||
Reference in New Issue
Block a user