dustin/melo-app
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2.56 — UI/Design-Rework: Melo Dark Fusion (neue Startseite, 2-stufige Einstellungen, Design-System)

Browse Source 
- 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
This commit is contained in:
Dustin
2026-08-06 19:56:02 +02:00
parent 85615d253c
commit 79b15a3cb8
14 changed files with 1078 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/screens/home_screen.dart
+233 -92
View File
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';
import '../viewmodels/melo_home_viewmodel.dart';
import '../models/song.dart';
import '../models/playlist.dart';
@@ -9,6 +10,7 @@ import '../widgets/melo_header.dart';
import '../widgets/statistik_card.dart';
import '../widgets/tag_leiste.dart';
import '../widgets/song_tile.dart';
import '../widgets/press_scale.dart';
import '../widgets/recent_widget.dart';
import 'download_screen.dart';
import 'cloud_screen.dart';
@@ -78,13 +80,11 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
super.didChangeAppLifecycleState(state);
switch (state) {
case AppLifecycleState.resumed:
// App in den Vordergrund → Realtime fortsetzen
_realtimeSync.fortsetzen();
case AppLifecycleState.paused:
case AppLifecycleState.detached:
case AppLifecycleState.inactive:
case AppLifecycleState.hidden:
// App im Hintergrund → Realtime pausieren (Batterie sparen)
_realtimeSync.pausiere();
}
}
@@ -175,7 +175,6 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
final suchModus = teile.length > 1 ? teile[1] : 'Alle';
if (suchtext.isEmpty) return;
// Tag-Namen die zum Suchtext passen
final matchingTags = _vm.tags
.where((t) => t['name'] != 'Alle' && t['name']!.toLowerCase().contains(suchtext))
.map((t) => t['name']!)
@@ -190,7 +189,6 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
return tag != null && s.tagIds!.contains(tag.id);
});
}
// Alle
if (s.titel.toLowerCase().contains(suchtext)) return true;
if (s.kuenstler.toLowerCase().contains(suchtext)) return true;
return s.tagIds != null && matchingTags.any((name) {
@@ -252,14 +250,11 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
Future<void> _zeigeServerBrowser() async {
if (_vm.navidrome.istVerbunden) {
// Trennen: auch gespeicherte Zugangsdaten löschen (SharedPreferences +
// SecureStorage) — sonst ist der Chip nach App-Neustart wieder grün.
await _vm.navidrome.loescheZugangsdaten();
_vm.navidromeAlben.clear();
if (mounted) setState(() {});
return;
}
// Verbinden: einfacher Login-Dialog
final urlCtrl = TextEditingController(text: AppConfig.navidromeUrl);
final userCtrl = TextEditingController();
final passCtrl = TextEditingController();
@@ -305,8 +300,6 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
});
}
/// Detail-Dialog zum ☁️ Musikserver-Status (Feature: Umbenennung von
/// „Navidrome verbinden“ → „Musikserver“).
Future<void> _zeigeMusikserverDetail() async {
final verbunden = _vm.navidrome.istVerbunden;
await showDialog<void>(
@@ -349,7 +342,7 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
Text(
verbunden
? 'Verbunden mit Navidrome · musik.baka-net.de'
: 'Nicht mit dem Musikserver verbunden.\nTippe auf „Verbinden“, um Alben zu durchstöbern.',
: 'Nicht mit dem Musikserver verbunden.\nTippe auf „Verbinden", um Alben zu durchstöbern.',
style: const TextStyle(color: MeloTheme.textSekundaer, fontSize: 13),
),
],
@@ -360,7 +353,7 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
TextButton(
onPressed: () {
Navigator.pop(ctx);
_zeigeServerBrowser(); // trennt (Credentials leeren)
_zeigeServerBrowser();
},
child: const Text('Trennen', style: TextStyle(color: MeloTheme.textSekundaer)),
),
@@ -421,7 +414,6 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
}
void _zeigeDownloadDialog() {
// „Lied+“ (YT-Download) als eigenen Screen öffnen
Navigator.push(
context,
MaterialPageRoute(
@@ -433,7 +425,6 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
);
}
/// Korrupten Song mit bekannter ytUrl neu herunterladen
Future<void> _erneutHerunterladen(Song song) async {
final neu = await _vm.downloader.reDownload(song);
if (!mounted) return;
@@ -448,8 +439,6 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
@override
Widget build(BuildContext context) {
return ListenableBuilder(
// _vm (Songs/Status), _cloud (Verbindung) UND SyncService.laeuftNotifier
// (☁️-Chip pulsiert bei laufendem Sync, auch im Hintergrund)
listenable: Listenable.merge([_vm, _cloud, SyncService.laeuftNotifier]),
builder: (_, _) {
if (_vm.ladt) {
@@ -489,8 +478,6 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
onSearch: _zeigeSuche,
onServer: _zeigeMusikserverDetail,
serverVerbunden: _vm.navidrome.istVerbunden,
// Chip pulsiert während des Syncs (SyncService-Läuft-Signal),
// beim Verbinden und solange der Server lädt.
serverSyncLaeuft: SyncService.laeuftNotifier.value ||
_cloud.status == CloudStatus.verbinde ||
_vm.serverLadt,
@@ -499,6 +486,8 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
child: ListView(
padding: const EdgeInsets.only(bottom: 8),
children: [
// ═══ Hero „Weiterhören"-Karte ═══
_weiterhoerenHeroKarte(),
// Weiterhören / Zuletzt gehört
RecentWidget(songs: _vm.letzteSongs, onPlay: _vm.spieleSong),
// Jahres-Recap (wie Spotify Wrapped)
@@ -526,6 +515,153 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
);
}
/// Hero „Weiterhören" – zeigt den aktuellen/last Song als große Card mit Glow
Widget _weiterhoerenHeroKarte() {
final aktuellerSong = PlayerService().aktuellerSong;
// Fallback: letzten gespielten Song verwenden
final song = aktuellerSong ?? (_vm.letzteSongs.isNotEmpty ? _vm.letzteSongs.first : null);
if (song == null) return const SizedBox.shrink();
final hatCover = song.coverPfad != null && File(song.coverPfad!).existsSync();
final akzent = MeloTheme.akzent;
return Padding(
padding: const EdgeInsets.fromLTRB(20, 8, 20, 12),
child: GestureDetector(
onTap: () => _oeffneNowPlaying(),
child: AnimatedScale(
scale: 1.0,
duration: const Duration(milliseconds: 120),
curve: Curves.easeOut,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(
colors: [
akzent.withValues(alpha: 0.3),
MeloTheme.schwarz,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
border: Border.all(
color: akzent.withValues(alpha: 0.35),
),
boxShadow: [
BoxShadow(
color: akzent.withValues(alpha: 0.25),
blurRadius: 30,
offset: const Offset(0, 8),
),
],
),
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
// Cover
ClipRRect(
borderRadius: BorderRadius.circular(14),
child: Container(
width: 64,
height: 64,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
akzent,
Color.lerp(akzent, Colors.black, 0.5)!,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: hatCover
? Image.file(File(song.coverPfad!), fit: BoxFit.cover)
: const Center(
child: Text('♪', style: TextStyle(fontSize: 28, color: Colors.white)),
),
),
),
const SizedBox(width: 16),
// Infos
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Weiterhören',
key: Key('weiterhoeren_label'),
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: MeloTheme.textSekundaer,
letterSpacing: 0.5,
),
),
const SizedBox(height: 4),
Text(
song.titel,
key: const Key('weiterhoeren_titel'),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
color: Colors.white,
letterSpacing: -0.5,
),
),
const SizedBox(height: 2),
Text(
song.kuenstler,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 13,
color: MeloTheme.textSekundaer,
),
),
],
),
),
// Play-Button mit Glow
_playButton(akzent),
],
),
),
),
),
),
);
}
/// Press-Scale Play-Button mit Glow (Mikro-Interaktion)
Widget _playButton(Color akzent) {
return PressScale(
onTap: () => _oeffneNowPlaying(),
child: Container(
width: 48,
height: 48,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [akzent, Color.lerp(akzent, Colors.black, 0.4)!],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
boxShadow: [
BoxShadow(
color: akzent.withValues(alpha: 0.35),
blurRadius: 20,
offset: const Offset(0, 4),
),
],
),
child: const Icon(Icons.play_arrow_rounded, color: Colors.white, size: 28),
),
);
}
/// ⭐ Favoriten-Schnellzugriff auf dem Start-Tab (horizontale Chips)
Widget _favoritenSchnellzugriff() {
final favoriten = _vm.songs
@@ -578,7 +714,7 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
padding: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(10),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Row(
@@ -587,8 +723,13 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
Container(
width: 28, height: 28,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: MeloTheme.rot.withValues(alpha: 0.3),
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))),
),
@@ -648,7 +789,6 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
],
),
Row(children: [
// „Lied+“ (YT-Download) in die Bibliothek integriert
_bibButton(Icons.add_circle_outline, 'Lied +', _zeigeDownloadDialog),
const SizedBox(width: 8),
_bibButton(Icons.search, 'Suche', _zeigeSuche),
@@ -666,13 +806,13 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 16, color: MeloTheme.rot),
Icon(icon, size: 16, color: MeloTheme.akzent),
const SizedBox(width: 6),
Text(label, style: const TextStyle(fontSize: 12, color: Colors.white70, fontWeight: FontWeight.w500)),
],
@@ -696,8 +836,8 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 7),
decoration: BoxDecoration(
color: aktiv ? MeloTheme.rot : MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(16),
color: aktiv ? MeloTheme.akzent : MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(999),
),
child: Text(
seg,
@@ -752,7 +892,6 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
}
}
/// Gruppiert Songs nach einem Schlüssel (Album, Künstler, Jahr, Genre)
Map<String, List<Song>> _gruppiereNach(String Function(Song) schluessel) {
final gruppen = <String, List<Song>>{};
for (final s in _vm.songs) {
@@ -763,7 +902,6 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
return gruppen;
}
/// Expandierbare Gruppen-Liste (Alben / Künstler / Jahre / Genres)
Widget _gruppenListe(Map<String, List<Song>> gruppen) {
final keys = gruppen.keys.toList()..sort((a, b) => a.toLowerCase().compareTo(b.toLowerCase()));
if (keys.isEmpty) {
@@ -779,14 +917,14 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
margin: const EdgeInsets.only(bottom: 6),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Theme(
data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
child: ExpansionTile(
tilePadding: const EdgeInsets.symmetric(horizontal: 14),
leading: const Icon(Icons.folder_outlined, color: MeloTheme.rot, size: 18),
leading: Icon(Icons.folder_outlined, color: MeloTheme.akzent, size: 18),
title: Text(
key,
style: const TextStyle(color: Colors.white, fontSize: 14, fontWeight: FontWeight.w500),
@@ -824,7 +962,6 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
);
}
/// 🏷 Tags-Segment: Tag-Liste mit Zählern; Tipp filtert die Songliste
Widget _tagsSegment() {
final eintraege = _vm.tagCounts.entries.toList()
..sort((a, b) => b.value.compareTo(a.value));
@@ -840,9 +977,9 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
padding: const EdgeInsets.only(bottom: 6),
child: Material(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(20),
child: InkWell(
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(20),
onTap: () {
_vm.aktiveTags = {e.key};
setState(() => _bibSegment = 'Songs');
@@ -850,12 +987,12 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 13),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Row(
children: [
const Icon(Icons.label_outline, color: MeloTheme.rot, size: 18),
Icon(Icons.label_outline, color: MeloTheme.akzent, size: 18),
const SizedBox(width: 12),
Expanded(
child: Text(
@@ -879,7 +1016,6 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
);
}
/// 📋 Playlists-Segment: Playlist-Liste, Tipp zeigt die Songs
Widget _playlistsSegment() {
return FutureBuilder<List<Playlist>>(
future: _vm.playlists.allePlaylists(),
@@ -903,19 +1039,19 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
padding: const EdgeInsets.only(bottom: 6),
child: Material(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(20),
child: InkWell(
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(20),
onTap: () => _zeigePlaylistSongs(pl),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 13),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Row(
children: [
const Icon(Icons.queue_music, color: MeloTheme.rot, size: 18),
Icon(Icons.queue_music, color: MeloTheme.akzent, size: 18),
const SizedBox(width: 12),
Expanded(
child: Text(
@@ -956,7 +1092,7 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
: ListView.builder(
itemCount: songs.length,
itemBuilder: (_, i) => ListTile(
leading: const Icon(Icons.music_note, color: MeloTheme.rot, size: 18),
leading: Icon(Icons.music_note, color: MeloTheme.akzent, size: 18),
title: Text(songs[i].titel, style: const TextStyle(color: Colors.white, fontSize: 14)),
subtitle: Text(songs[i].kuenstler, style: const TextStyle(color: MeloTheme.textSekundaer, fontSize: 11)),
onTap: () {
@@ -971,7 +1107,6 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
);
}
/// ⬇ Downloads-Segment: lokale Songs + „Lied+“-Einstieg
Widget _downloadsSegment() {
final downloads = _vm.songs.where((s) => s.istHeruntergeladen).toList();
return Column(
@@ -984,15 +1119,20 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
decoration: BoxDecoration(
gradient: const LinearGradient(colors: [Color(0xFF3A0000), Color(0xFF1A0000)]),
borderRadius: BorderRadius.circular(14),
border: Border.all(color: MeloTheme.rot.withValues(alpha: 0.45)),
gradient: LinearGradient(
colors: [
MeloTheme.akzent.withValues(alpha: 0.25),
MeloTheme.akzent.withValues(alpha: 0.05),
],
),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.akzent.withValues(alpha: 0.4)),
),
child: const Row(
child: Row(
children: [
Icon(Icons.add_circle_outline, color: MeloTheme.rot, size: 22),
SizedBox(width: 12),
Expanded(
Icon(Icons.add_circle_outline, color: MeloTheme.akzent, size: 22),
const SizedBox(width: 12),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@@ -1003,7 +1143,7 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
],
),
),
Icon(Icons.chevron_right, color: MeloTheme.rot, size: 20),
Icon(Icons.chevron_right, color: MeloTheme.akzent, size: 20),
],
),
),
@@ -1023,7 +1163,7 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.play_circle_outline, size: 64, color: MeloTheme.dunkel2),
Icon(Icons.play_circle_outline, size: 64, color: MeloTheme.dunkel2.withValues(alpha: 0.5)),
const SizedBox(height: 16),
const Text(
'Nichts spielt gerade',
@@ -1036,13 +1176,8 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
style: TextStyle(fontSize: 13, color: MeloTheme.textSekundaer),
),
const SizedBox(height: 20),
ElevatedButton(
FilledButton(
onPressed: () => setState(() => _aktiverTab = 1),
style: ElevatedButton.styleFrom(
backgroundColor: MeloTheme.rot,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
),
child: const Text('Zur Bibliothek'),
),
],
@@ -1093,14 +1228,14 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
Container(
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(14),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Column(
children: [
_infoZeile('Version', '2.52.3'),
_infoZeile('Version', '2.56.0'),
const Divider(color: MeloTheme.dunkel2, height: 1),
_infoZeile('Theme', 'Schwarz + Rot'),
_infoZeile('Theme', 'Melo Dark Fusion'),
const Divider(color: MeloTheme.dunkel2, height: 1),
_infoZeile('Musikserver', AppConfig.navidromeUrl),
const Divider(color: MeloTheme.dunkel2, height: 1),
@@ -1124,9 +1259,9 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
icon: const Icon(Icons.logout, size: 18),
label: const Text('Abmelden', style: TextStyle(fontSize: 14)),
style: OutlinedButton.styleFrom(
foregroundColor: MeloTheme.rot,
side: const BorderSide(color: MeloTheme.rot),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
foregroundColor: MeloTheme.akzent,
side: BorderSide(color: MeloTheme.akzent),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(999)),
),
),
),
@@ -1150,14 +1285,14 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
padding: const EdgeInsets.only(bottom: 8),
child: Material(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(14),
borderRadius: BorderRadius.circular(20),
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(14),
borderRadius: BorderRadius.circular(20),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Row(
@@ -1167,9 +1302,9 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
height: 40,
decoration: BoxDecoration(
color: MeloTheme.dunkel2,
borderRadius: BorderRadius.circular(10),
borderRadius: BorderRadius.circular(14),
),
child: Icon(icon, color: MeloTheme.rot, size: 20),
child: Icon(icon, color: MeloTheme.akzent, size: 20),
),
const SizedBox(width: 14),
Expanded(
@@ -1266,16 +1401,15 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
Widget _bottomNav() {
return Container(
decoration: const BoxDecoration(
border: Border(top: BorderSide(color: MeloTheme.dunkel1)),
decoration: BoxDecoration(
border: Border(top: BorderSide(color: MeloTheme.oberflaeche, width: 0)),
),
child: NavigationBar(
backgroundColor: MeloTheme.schwarz,
indicatorColor: MeloTheme.rot.withValues(alpha: 0.25),
indicatorColor: MeloTheme.akzent.withValues(alpha: 0.25),
selectedIndex: _aktiverTab,
onDestinationSelected: (i) {
if (i == 2) {
// ▶️ Jetzt läuft: Fullscreen öffnen, wenn etwas spielt
if (PlayerService().aktuellerSong != null) {
_oeffneNowPlaying();
return;
@@ -1309,7 +1443,7 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
children: [
Text(titel, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.white)),
Row(children: [
Text('${songs.length} Titel${_vm.aktiveTags.isNotEmpty ? ' (gefiltert)' : ''}', style: TextStyle(fontSize: 12, color: MeloTheme.rot)),
Text('${songs.length} Titel${_vm.aktiveTags.isNotEmpty ? ' (gefiltert)' : ''}', style: TextStyle(fontSize: 12, color: MeloTheme.akzent)),
const SizedBox(width: 8),
GestureDetector(
onTap: _scanMusik,
@@ -1319,12 +1453,12 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
border: Border.all(color: MeloTheme.dunkel2),
borderRadius: BorderRadius.circular(8),
),
child: const Row(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.refresh, size: 12, color: MeloTheme.rot),
SizedBox(width: 4),
Text('Scannen', style: TextStyle(fontSize: 11, color: MeloTheme.rot)),
Icon(Icons.refresh, size: 12, color: MeloTheme.akzent),
const SizedBox(width: 4),
Text('Scannen', style: TextStyle(fontSize: 11, color: MeloTheme.akzent)),
],
),
),
@@ -1364,22 +1498,20 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
);
}
/// Hilfs-Widget für Such-Modus-Chips
Widget _suchChip(String label, bool aktiv, VoidCallback onTap) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
decoration: BoxDecoration(
color: aktiv ? MeloTheme.rot : MeloTheme.dunkel2,
borderRadius: BorderRadius.circular(12),
color: aktiv ? MeloTheme.akzent : MeloTheme.dunkel2,
borderRadius: BorderRadius.circular(999),
),
child: Text(label, style: TextStyle(fontSize: 11, color: aktiv ? Colors.white : MeloTheme.textSekundaer)),
),
);
}
/// Karte „Jahres-Recap“ – öffnet den Wrapped-artigen Recap-Screen
Widget _recapKarte() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
@@ -1393,13 +1525,17 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Color(0xFF3A0000), Color(0xFF1A0000), Color(0xFF0D0D0D)],
gradient: LinearGradient(
colors: [
MeloTheme.akzent.withValues(alpha: 0.2),
MeloTheme.akzent.withValues(alpha: 0.05),
MeloTheme.schwarz,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(14),
border: Border.all(color: MeloTheme.rot.withValues(alpha: 0.45)),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.akzent.withValues(alpha: 0.35)),
),
child: Row(
children: [
@@ -1407,8 +1543,8 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
width: 42,
height: 42,
decoration: BoxDecoration(
color: MeloTheme.rot.withValues(alpha: 0.18),
borderRadius: BorderRadius.circular(12),
color: MeloTheme.akzent.withValues(alpha: 0.18),
borderRadius: BorderRadius.circular(14),
),
child: const Center(
child: Text('🎧', style: TextStyle(fontSize: 20)),
@@ -1437,7 +1573,7 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
],
),
),
const Icon(Icons.chevron_right, color: MeloTheme.rot, size: 22),
Icon(Icons.chevron_right, color: MeloTheme.akzent, size: 22),
],
),
),
@@ -1445,16 +1581,20 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
);
}
/// Banner "💌 Seit 2008" – erscheint nach 10 Playbacks
Widget _botschaftBanner() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
decoration: BoxDecoration(
gradient: const LinearGradient(colors: [Color(0xFF2A0000), Color(0xFF1A0000)]),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: MeloTheme.rot.withValues(alpha: 0.4)),
gradient: LinearGradient(
colors: [
MeloTheme.akzent.withValues(alpha: 0.2),
MeloTheme.akzent.withValues(alpha: 0.05),
],
),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.akzent.withValues(alpha: 0.35)),
),
child: Row(
children: [
@@ -1481,3 +1621,4 @@ class _MeloHomeState extends State<MeloHome> with WidgetsBindingObserver {
);
}
}
lib/screens/login_screen.dart
+60 -40
View File
@@ -6,8 +6,7 @@ import '../utils/user_effekte.dart';
import '../config/app_config.dart';
import 'home_screen.dart';
/// Melo Login-Screen – Schwarz+Rot Design
/// Baka-Auth + Navidrome-Credentials
/// Melo Login-Screen – Melo Dark Fusion Design
class LoginScreen extends StatefulWidget {
const LoginScreen({super.key});
@@ -74,9 +73,7 @@ class _LoginScreenState extends State<LoginScreen>
if (result.erfolg) {
_setzeStatus('✅ Login erfolgreich!', ok: true);
// Per-User-Akzent (überschreibbar in den Einstellungen) + Begrüßung
await UserEffekt.anwenden(user);
// Navidrome automatisch mit gleichen Credentials syncen
await NavidromeService().speichereZugangsdaten(
AppConfig.navidromeUrl, user, pass);
await Future.delayed(const Duration(milliseconds: 600));
@@ -110,6 +107,8 @@ class _LoginScreenState extends State<LoginScreen>
}
Widget _buildLogin() {
final akzent = MeloTheme.akzent;
return Column(
mainAxisSize: MainAxisSize.min,
children: [
@@ -123,11 +122,11 @@ class _LoginScreenState extends State<LoginScreen>
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(20),
borderRadius: BorderRadius.circular(24),
border: Border.all(color: MeloTheme.dunkel2),
boxShadow: [
BoxShadow(
color: MeloTheme.rot.withValues(alpha: 0.15),
color: akzent.withValues(alpha: 0.15),
blurRadius: 30,
offset: const Offset(0, 8),
),
@@ -142,6 +141,7 @@ class _LoginScreenState extends State<LoginScreen>
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w700,
letterSpacing: -0.5,
),
),
const SizedBox(height: 4),
@@ -172,37 +172,55 @@ class _LoginScreenState extends State<LoginScreen>
),
const SizedBox(height: 24),
// Login Button
// Login Button – Gradient Pill
SizedBox(
width: double.infinity,
height: 50,
child: ElevatedButton(
onPressed: _ladt ? null : _login,
style: ElevatedButton.styleFrom(
backgroundColor: MeloTheme.rot,
disabledBackgroundColor: MeloTheme.dunkel2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(999),
gradient: LinearGradient(
colors: [akzent, Color.lerp(akzent, Colors.black, 0.4)!],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
elevation: 0,
boxShadow: [
BoxShadow(
color: akzent.withValues(alpha: 0.3),
blurRadius: 16,
offset: const Offset(0, 4),
),
],
),
child: _ladt
? const SizedBox(
width: 22,
height: 22,
child: CircularProgressIndicator(
strokeWidth: 2.5,
color: Colors.white,
child: ElevatedButton(
onPressed: _ladt ? null : _login,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.transparent,
disabledBackgroundColor: Colors.transparent,
shadowColor: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(999),
),
elevation: 0,
),
child: _ladt
? const SizedBox(
width: 22,
height: 22,
child: CircularProgressIndicator(
strokeWidth: 2.5,
color: Colors.white,
),
)
: const Text(
'Anmelden',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
)
: const Text(
'Anmelden',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
),
),
@@ -235,6 +253,8 @@ class _LoginScreenState extends State<LoginScreen>
}
Widget _logoBereich({bool klein = false}) {
final akzent = MeloTheme.akzent;
return Column(
children: [
// Icon
@@ -243,14 +263,14 @@ class _LoginScreenState extends State<LoginScreen>
height: klein ? 64 : 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: const LinearGradient(
colors: [Color(0xFFCC0000), Color(0xFF660000)],
gradient: LinearGradient(
colors: [akzent, Color.lerp(akzent, Colors.black, 0.5)!],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
boxShadow: [
BoxShadow(
color: MeloTheme.rot.withValues(alpha: 0.4),
color: akzent.withValues(alpha: 0.4),
blurRadius: 24,
offset: const Offset(0, 6),
),
@@ -277,7 +297,7 @@ class _LoginScreenState extends State<LoginScreen>
Text(
'Musik. Für immer.',
style: TextStyle(
color: MeloTheme.rot.withValues(alpha: 0.8),
color: akzent.withValues(alpha: 0.8),
fontSize: 13,
letterSpacing: 2,
fontWeight: FontWeight.w400,
@@ -295,7 +315,7 @@ class _LoginScreenState extends State<LoginScreen>
color: _statusOk
? const Color(0xFF0D3B1E)
: const Color(0xFF3B0D0D),
borderRadius: BorderRadius.circular(10),
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: _statusOk ? const Color(0xFF2E7D32) : const Color(0xFF7D2E2E),
),
@@ -348,15 +368,15 @@ class _LoginScreenState extends State<LoginScreen>
filled: true,
fillColor: MeloTheme.dunkel2,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: const BorderSide(color: MeloTheme.rot, width: 1.5),
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide(color: MeloTheme.akzent, width: 1.5),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(color: MeloTheme.dunkel2),
),
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
lib/screens/now_playing_screen.dart
+1 -1
View File
@@ -591,7 +591,7 @@ class _NowPlayingScreenState extends State<NowPlayingScreen>
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF1A0A0A), MeloTheme.schwarz],
colors: [MeloTheme.dunkel1, MeloTheme.schwarz],
),
),
);
lib/screens/settings_screen.dart
+233 -145
View File
@@ -13,10 +13,8 @@ import 'cloud_screen.dart';
import 'recap_screen.dart';
import 'erweitert_screen.dart';
/// Vollwertiger Einstellungen-Screen – kein Popup mehr.
/// Sprint D F4: alle Einstellungen funktionierend + persistiert
/// (Auto-Sync-Intervall, Sleep-Timer-Standard, Wiedergabegeschwindigkeit,
/// Akzentfarbe pro User, Speicher-Info).
/// Einstellungen – 2-stufig: Standard + Expertenmodus (ab v2.56).
/// Sprint D F4: alle Einstellungen funktionierend + persistiert.
class SettingsScreen extends StatefulWidget {
const SettingsScreen({super.key});
@@ -25,14 +23,19 @@ class SettingsScreen extends StatefulWidget {
}
class _SettingsScreenState extends State<SettingsScreen> {
// ─── Einstellungen (aus SharedPreferences geladen) ───
// ─── Standard-Einstellungen ───
String _syncModus = 'realtime'; // 'realtime' | 'manual' | 'interval'
int _cloudIntervallStunden = 48; // 48/72/120/168/336
int _sleepDefaultMin = 0; // 0 = Aus
int _cloudIntervallStunden = 48;
int _sleepDefaultMin = 0;
double _geschwindigkeit = 1.0;
Color _akzent = MeloTheme.akzent;
Map<String, int> _speicherInfo = const {'anzahl': 0, 'bytes': 0};
// ─── Expertenmodus ───
bool _expertenModus = false;
String? _letzterSync;
String? _verbindungsStatus;
/// Verfügbare Zeit-Intervalle für Modus 3 (in Stunden).
static const _intervallOptionen = {
48: '2 Tage',
@@ -62,13 +65,10 @@ class _SettingsScreenState extends State<SettingsScreen> {
Future<void> _ladeEinstellungen() async {
final p = await SharedPreferences.getInstance();
final speed = p.getDouble('playback_speed') ?? 1.0;
final akzentHex =
p.getString(UserEffekt.akzentKey(AuthService().benutzer));
// Sync-Modus laden (mit Migration von altem cloud_interval)
final akzentHex = p.getString(UserEffekt.akzentKey(AuthService().benutzer));
final modus = p.getString('sync_modus') ?? 'realtime';
int intervallStunden = p.getInt('cloud_interval_stunden') ?? 0;
if (intervallStunden <= 0) {
// Migration: alter cloud_interval (1/3/6/12h) → 48h default
final alt = p.getInt('cloud_interval') ?? 0;
if (alt == 1 || alt == 3 || alt == 6 || alt == 12) {
intervallStunden = 48;
@@ -77,10 +77,17 @@ class _SettingsScreenState extends State<SettingsScreen> {
intervallStunden = 48;
}
}
// Prüfe, ob der Modus gültig ist
if (!['realtime', 'manual', 'interval'].contains(modus)) {
await p.setString('sync_modus', 'realtime');
}
// Expertenmodus laden (Key: 'experten_modus')
final experte = p.getBool('experten_modus') ?? false;
// Sync-Info für erweiterte Sektion
final letzterSyncStr = p.getString('letzter_sync');
final syncStat = CloudService().status;
if (!mounted) return;
setState(() {
_syncModus = modus;
@@ -88,8 +95,10 @@ class _SettingsScreenState extends State<SettingsScreen> {
_sleepDefaultMin = p.getInt('sleep_timer_default_min') ?? 0;
_geschwindigkeit = speed;
_akzent = UserEffekt.farbeAusHex(akzentHex) ?? MeloTheme.akzent;
_expertenModus = experte;
_letzterSync = letzterSyncStr;
_verbindungsStatus = syncStat == CloudStatus.verbunden ? 'Verbunden' : 'Getrennt';
});
// Speed-Default auch auf den Player anwenden (gilt fürs Abspielen)
await PlayerService().setGeschwindigkeit(speed);
}
@@ -99,30 +108,24 @@ class _SettingsScreenState extends State<SettingsScreen> {
setState(() => _speicherInfo = info);
}
// ─── Setter (persistieren + anwenden) ───
// ─── Setter ────────────────────────────────────────
/// Setzt den Sync-Modus und persistiert ihn.
/// Startet/stoppt den Realtime-Service bzw. den Timer entsprechend.
Future<void> _syncModusSetzen(String modus) async {
setState(() => _syncModus = modus);
final p = await SharedPreferences.getInstance();
await p.setString('sync_modus', modus);
// Realtime-Service entsprechend starten/stoppen
final rs = RealtimeSyncService();
switch (modus) {
case 'realtime':
// SSE sofort starten
await rs.starteWennAktiviert();
break;
case 'manual':
// Kein Auto-Sync — SSE stoppen, Timer deaktivieren
rs.stoppe();
await p.setInt('cloud_interval', 0); // alten Timer deaktivieren
await p.setInt('cloud_interval', 0);
await SyncService.starteAutoSyncTimer();
break;
case 'interval':
// Intervall-Timer — SSE stoppen, Timer mit cloud_interval_stunden starten
rs.stoppe();
await p.setInt('cloud_interval', _cloudIntervallStunden);
await SyncService.starteAutoSyncTimer();
@@ -130,12 +133,10 @@ class _SettingsScreenState extends State<SettingsScreen> {
}
}
/// Setzt das Cloud-Intervall (nur für Modus 3: interval).
Future<void> _intervallSetzen(int stunden) async {
setState(() => _cloudIntervallStunden = stunden);
final p = await SharedPreferences.getInstance();
await p.setInt('cloud_interval_stunden', stunden);
// Timer neu starten (der cloud_interval-Wert wird aktualisiert)
await p.setInt('cloud_interval', stunden);
await SyncService.starteAutoSyncTimer();
}
@@ -155,12 +156,18 @@ class _SettingsScreenState extends State<SettingsScreen> {
Future<void> _akzentSetzen(Color farbe) async {
setState(() => _akzent = farbe);
MeloTheme.akzent = farbe; // live — main.dart rebuildet das Theme
MeloTheme.akzent = farbe;
final p = await SharedPreferences.getInstance();
await p.setString(
UserEffekt.akzentKey(AuthService().benutzer), _hexVonFarbe(farbe));
}
Future<void> _expertenModusSetzen(bool wert) async {
setState(() => _expertenModus = wert);
final p = await SharedPreferences.getInstance();
await p.setBool('experten_modus', wert);
}
String _hexVonFarbe(Color c) {
String hx(int w) => w.toRadixString(16).padLeft(2, '0').toUpperCase();
return '${hx((c.r * 255).round())}${hx((c.g * 255).round())}${hx((c.b * 255).round())}';
@@ -180,16 +187,16 @@ class _SettingsScreenState extends State<SettingsScreen> {
return Scaffold(
backgroundColor: MeloTheme.schwarz,
appBar: AppBar(
backgroundColor: MeloTheme.dunkel1,
backgroundColor: MeloTheme.oberflaeche,
leading: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.white, size: 22),
onPressed: () => Navigator.pop(context),
),
title: const Row(
title: Row(
children: [
Icon(Icons.settings, color: MeloTheme.rot, size: 20),
SizedBox(width: 10),
Text(
Icon(Icons.settings, color: MeloTheme.akzent, size: 20),
const SizedBox(width: 10),
const Text(
'Einstellungen',
style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.w600),
),
@@ -199,8 +206,11 @@ class _SettingsScreenState extends State<SettingsScreen> {
body: ListView(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
children: [
// ─── Sektion: Verbindung ───
_sektionHeader('Verbindung'),
// ═══ Sektion: Standard ═══
_sektionHeader('⚙️ Standard', icon: Icons.tune),
const SizedBox(height: 4),
// ─── Verbindung ───
_einstellungsKachel(
icon: Icons.cloud_outlined,
titel: 'Cloud Sync',
@@ -219,14 +229,13 @@ class _SettingsScreenState extends State<SettingsScreen> {
titel: 'Musikserver',
untertitel: 'Navidrome Musik-Server verbinden',
onTap: () {
// Signal zum Öffnen des Server-Browsers
Navigator.pop(context, 'server');
},
),
const SizedBox(height: 8),
// ─── Sektion: Cloud-Sync ───
_sektionHeader('Cloud-Sync'),
const SizedBox(height: 4),
// ─── Sync & Wiedergabe ───
_einstellungsGruppe([
_gruppenZeile(
label: 'Sync-Modus',
@@ -284,7 +293,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
),
const Divider(color: MeloTheme.dunkel2, height: 1),
_gruppenZeile(
label: 'Wiedergabegeschwindigkeit',
label: 'Geschwindigkeit',
wert: '${_geschwindigkeit.toStringAsFixed(2)}x',
inhalt: Slider(
value: _geschwindigkeit,
@@ -297,10 +306,10 @@ class _SettingsScreenState extends State<SettingsScreen> {
),
),
]),
const SizedBox(height: 8),
// ─── Sektion: Aussehen ───
_sektionHeader('Aussehen'),
const SizedBox(height: 4),
// ─── Aussehen ───
_einstellungsGruppe([
_gruppenZeile(
label: 'Akzentfarbe',
@@ -312,15 +321,10 @@ class _SettingsScreenState extends State<SettingsScreen> {
]),
),
]),
const SizedBox(height: 8),
// ─── Sektion: Daten & Privatsphäre ───
_sektionHeader('Daten & Privatsphäre'),
_infoKachel(
icon: Icons.storage_outlined,
titel: 'Lokale Musik',
wert: _speicherText,
),
const SizedBox(height: 4),
// ─── Recap ───
_einstellungsKachel(
icon: Icons.auto_graph,
titel: 'Recap (Woche/Monat/Jahr)',
@@ -332,77 +336,8 @@ class _SettingsScreenState extends State<SettingsScreen> {
);
},
),
const SizedBox(height: 8),
// ─── Sektion: Erweitert (Technik) ───
_sektionHeader('Erweitert'),
_einstellungsKachel(
icon: Icons.handyman_outlined,
titel: 'Erweitert',
untertitel: 'Logs, Diagnose, Entwickler & Scanner',
onTap: () async {
// Erweitert-Screen öffnen. „Musik scannen“ (onScan) schließt den
// Erweitert-Screen mit dem Ergebnis 'scanner' → hier awaiten und
// das Ergebnis an MeloHome weiterreichen, das den Scanner startet.
final result = await Navigator.push<String>(
context,
MaterialPageRoute(
builder: (_) => ErweitertScreen(
onScan: () {
Navigator.pop(context, 'scanner');
},
),
),
);
if (!mounted || result != 'scanner') return;
Navigator.pop(this.context, 'scanner');
},
),
_einstellungsKachel(
icon: Icons.article_outlined,
titel: 'Logs',
untertitel: 'App-Logbuch im Speicher ansehen',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const LogViewerScreen()),
);
},
),
_einstellungsKachel(
icon: Icons.bug_report_outlined,
titel: 'Entwickler',
untertitel: 'Version, URLs & technische Details',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const EntwicklerScreen()),
);
},
),
const SizedBox(height: 8),
// ─── Sektion: Info ───
_sektionHeader('Info'),
Container(
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(14),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Column(
children: [
_infoZeile('Version', '2.52.3'),
const Divider(color: MeloTheme.dunkel2, height: 1),
_infoZeile('Theme', 'Schwarz + Akzent'),
const Divider(color: MeloTheme.dunkel2, height: 1),
_infoZeile('Auth', AppConfig.authUrl),
const Divider(color: MeloTheme.dunkel2, height: 1),
_infoZeile('Cloud', AppConfig.cloudUrl),
],
),
),
const SizedBox(height: 24),
const SizedBox(height: 4),
// ─── Abmelden ───
SizedBox(
@@ -415,29 +350,180 @@ class _SettingsScreenState extends State<SettingsScreen> {
icon: const Icon(Icons.logout, size: 18),
label: const Text('Abmelden', style: TextStyle(fontSize: 14)),
style: OutlinedButton.styleFrom(
foregroundColor: MeloTheme.rot,
side: const BorderSide(color: MeloTheme.rot),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
foregroundColor: MeloTheme.akzent,
side: BorderSide(color: MeloTheme.akzent),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(999)),
),
),
),
const SizedBox(height: 20),
// ═══ Expertenmodus ═══
Container(
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: SwitchListTile(
key: const Key('experten_modus'),
title: const Text(
'Expertenmodus',
style: TextStyle(color: Colors.white, fontSize: 15, fontWeight: FontWeight.w600),
),
subtitle: const Text(
'Erweiterte Einstellungen & Diagnose',
style: TextStyle(color: MeloTheme.textSekundaer, fontSize: 12),
),
value: _expertenModus,
activeTrackColor: MeloTheme.akzent,
activeThumbColor: MeloTheme.akzent,
onChanged: _expertenModusSetzen,
secondary: Icon(Icons.science_outlined, color: MeloTheme.akzent, size: 22),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
),
),
// ═══ Erweiterte Sektion (nur wenn Expertenmodus an) ═══
if (_expertenModus) ...[
const SizedBox(height: 4),
_sektionHeader('🔬 Erweitert', icon: Icons.science),
// ─── Storage-Info ───
_infoKachel(
icon: Icons.storage_outlined,
titel: 'Lokale Musik',
wert: _speicherText,
),
// ─── Sync-Details ───
Container(
margin: const EdgeInsets.only(bottom: 8),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Column(
children: [
_infoZeile('Letzter Sync', _letzterSync ?? 'Nie'),
const Divider(color: MeloTheme.dunkel2, height: 1),
_infoZeile('Modus', _syncModusText),
const Divider(color: MeloTheme.dunkel2, height: 1),
_infoZeile('Verbindung', _verbindungsStatus ?? '–'),
],
),
),
// ─── Server-URL-Anzeige ───
Container(
margin: const EdgeInsets.only(bottom: 8),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Column(
children: [
_infoZeile('Auth-URL', AppConfig.authUrl),
const Divider(color: MeloTheme.dunkel2, height: 1),
_infoZeile('Cloud-URL', AppConfig.cloudUrl),
const Divider(color: MeloTheme.dunkel2, height: 1),
_infoZeile('Musikserver', AppConfig.navidromeUrl),
],
),
),
// ─── Logs & DB-Wartung ───
_einstellungsKachel(
icon: Icons.article_outlined,
titel: 'Logs',
untertitel: 'App-Logbuch im Speicher ansehen',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const LogViewerScreen()),
);
},
),
_einstellungsKachel(
icon: Icons.handyman_outlined,
titel: 'DB-Wartung & Diagnose',
untertitel: 'Datenbank-Optimierung, Scanner & mehr',
onTap: () async {
final result = await Navigator.push<String>(
context,
MaterialPageRoute(
builder: (_) => ErweitertScreen(
onScan: () {
Navigator.pop(context, 'scanner');
},
),
),
);
if (!mounted || result != 'scanner') return;
Navigator.pop(this.context, 'scanner');
},
),
_einstellungsKachel(
icon: Icons.bug_report_outlined,
titel: 'Entwickler',
untertitel: 'Version, URLs & technische Details',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const EntwicklerScreen()),
);
},
),
const SizedBox(height: 4),
// ─── Info ───
Container(
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Column(
children: [
_infoZeile('Version', '2.56.0'),
const Divider(color: MeloTheme.dunkel2, height: 1),
_infoZeile('Theme', 'Melo Dark Fusion'),
],
),
),
],
const SizedBox(height: 32),
],
),
);
}
Widget _sektionHeader(String titel) {
// ─── ─── Hilfs-Widgets ─── ───
Widget _sektionHeader(String titel, {IconData? icon}) {
return Padding(
padding: const EdgeInsets.fromLTRB(4, 16, 4, 8),
child: Text(
titel,
style: const TextStyle(
color: MeloTheme.textSekundaer,
fontSize: 11,
fontWeight: FontWeight.w600,
letterSpacing: 1.2,
),
child: Row(
children: [
if (icon != null) ...[
Icon(icon, size: 16, color: MeloTheme.akzent),
const SizedBox(width: 6),
],
Text(
titel,
style: const TextStyle(
color: MeloTheme.textSekundaer,
fontSize: 12,
fontWeight: FontWeight.w600,
letterSpacing: 1.0,
),
),
],
),
);
}
@@ -452,14 +538,14 @@ class _SettingsScreenState extends State<SettingsScreen> {
padding: const EdgeInsets.only(bottom: 8),
child: Material(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(14),
borderRadius: BorderRadius.circular(20),
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(14),
borderRadius: BorderRadius.circular(20),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Row(
@@ -469,9 +555,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
height: 40,
decoration: BoxDecoration(
color: MeloTheme.dunkel2,
borderRadius: BorderRadius.circular(10),
borderRadius: BorderRadius.circular(14),
),
child: Icon(icon, color: MeloTheme.rot, size: 20),
child: Icon(icon, color: MeloTheme.akzent, size: 20),
),
const SizedBox(width: 14),
Expanded(
@@ -499,7 +585,6 @@ class _SettingsScreenState extends State<SettingsScreen> {
);
}
/// Informations-Kachel (nicht antippbar) — z.B. Speicher-Info.
Widget _infoKachel({
required IconData icon,
required String titel,
@@ -511,7 +596,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(14),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Row(
@@ -521,9 +606,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
height: 40,
decoration: BoxDecoration(
color: MeloTheme.dunkel2,
borderRadius: BorderRadius.circular(10),
borderRadius: BorderRadius.circular(14),
),
child: Icon(icon, color: MeloTheme.rot, size: 20),
child: Icon(icon, color: MeloTheme.akzent, size: 20),
),
const SizedBox(width: 14),
Expanded(
@@ -542,13 +627,12 @@ class _SettingsScreenState extends State<SettingsScreen> {
);
}
/// Gruppe aus mehreren Einstellungs-Zeilen in einer abgerundeten Box.
Widget _einstellungsGruppe(List<Widget> kinder) {
return Container(
margin: const EdgeInsets.only(bottom: 8),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(14),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Column(children: kinder),
@@ -595,7 +679,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 7),
decoration: BoxDecoration(
color: aktiv ? MeloTheme.akzent : MeloTheme.dunkel2,
borderRadius: BorderRadius.circular(16),
borderRadius: BorderRadius.circular(999),
),
child: Text(
label,
@@ -622,6 +706,12 @@ class _SettingsScreenState extends State<SettingsScreen> {
color: aktiv ? Colors.white : Colors.transparent,
width: 2.5,
),
boxShadow: aktiv ? [
BoxShadow(
color: farbe.withValues(alpha: 0.4),
blurRadius: 12,
),
] : null,
),
child: aktiv ? const Icon(Icons.check, size: 18, color: Colors.white) : null,
),
@@ -647,7 +737,6 @@ class _SettingsScreenState extends State<SettingsScreen> {
);
}
/// Anzeigetext für den aktuellen Sync-Modus.
String get _syncModusText {
switch (_syncModus) {
case 'realtime':
@@ -661,19 +750,18 @@ class _SettingsScreenState extends State<SettingsScreen> {
}
}
/// Radio-ähnliches Kachel-Widget für Sync-Modus-Auswahl.
Widget _modusRadioTile(String titel, String wert, String beschreibung) {
final ausgewaehlt = _syncModus == wert;
return Padding(
padding: const EdgeInsets.only(bottom: 4),
child: InkWell(
onTap: () => _syncModusSetzen(wert),
borderRadius: BorderRadius.circular(10),
borderRadius: BorderRadius.circular(14),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
decoration: BoxDecoration(
color: ausgewaehlt ? MeloTheme.akzent.withAlpha(25) : Colors.transparent,
borderRadius: BorderRadius.circular(10),
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: ausgewaehlt ? MeloTheme.akzent : MeloTheme.dunkel2,
width: ausgewaehlt ? 1.5 : 1,
lib/utils/farb_theme.dart
+335 -36
View File
@@ -1,13 +1,140 @@
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
/// Melo-Design-Tokens: Zugriff per `Theme.of(context).extension<MeloDesignTokens>()!`
class MeloDesignTokens extends ThemeExtension<MeloDesignTokens> {
// ─── Farben ───
final Color hintergrund; // #0B0B10
final Color oberflaeche; // #14141C
final Color karte; // #1C1C26
final Color textPrimaer; // #F5F5F7
final Color textSekundaer; // #9E9EAB
final Color erfolg; // #4CAF50
final Color warnung; // #FF9800
final Color fehler; // #F44336
final Color akzent; // Live per ValueNotifier
// ─── Radien ───
final double cardRadius; // 20
final double buttonRadius; // 999 (Pill)
final double sheetRadius; // 28
final double dialogRadius; // 24
final double inputRadius; // 14
// ─── Abstände / Typo ───
final double abstandXs;
final double abstandSm;
final double abstandMd;
final double abstandLg;
const MeloDesignTokens({
required this.hintergrund,
required this.oberflaeche,
required this.karte,
required this.textPrimaer,
required this.textSekundaer,
required this.erfolg,
required this.warnung,
required this.fehler,
required this.akzent,
this.cardRadius = 20,
this.buttonRadius = 999,
this.sheetRadius = 28,
this.dialogRadius = 24,
this.inputRadius = 14,
this.abstandXs = 4,
this.abstandSm = 8,
this.abstandMd = 16,
this.abstandLg = 24,
});
/// Akzent-Gradient (Akzent → dunklere Variante)
Gradient get akzentGradient => LinearGradient(
colors: [akzent, Color.lerp(akzent, Colors.black, 0.5)!],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
/// Rot-Gradient (hartes Rot, unabhängig vom User-Akzent)
static const Gradient rotGradient = LinearGradient(
colors: [Color(0xFFFF3B30), Color(0xFFC62828)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
/// Glow-Schatten für Akzent-Elemente
List<BoxShadow> get akzentGlow => [
BoxShadow(
color: akzent.withValues(alpha: 0.30),
blurRadius: 24,
offset: const Offset(0, 8),
),
];
@override
MeloDesignTokens copyWith({
Color? hintergrund,
Color? oberflaeche,
Color? karte,
Color? textPrimaer,
Color? textSekundaer,
Color? erfolg,
Color? warnung,
Color? fehler,
Color? akzent,
double? cardRadius,
double? buttonRadius,
double? sheetRadius,
double? dialogRadius,
double? inputRadius,
}) {
return MeloDesignTokens(
hintergrund: hintergrund ?? this.hintergrund,
oberflaeche: oberflaeche ?? this.oberflaeche,
karte: karte ?? this.karte,
textPrimaer: textPrimaer ?? this.textPrimaer,
textSekundaer: textSekundaer ?? this.textSekundaer,
erfolg: erfolg ?? this.erfolg,
warnung: warnung ?? this.warnung,
fehler: fehler ?? this.fehler,
akzent: akzent ?? this.akzent,
cardRadius: cardRadius ?? this.cardRadius,
buttonRadius: buttonRadius ?? this.buttonRadius,
sheetRadius: sheetRadius ?? this.sheetRadius,
dialogRadius: dialogRadius ?? this.dialogRadius,
inputRadius: inputRadius ?? this.inputRadius,
);
}
@override
MeloDesignTokens lerp(ThemeExtension<MeloDesignTokens>? other, double t) {
if (other is! MeloDesignTokens) return this;
return MeloDesignTokens(
hintergrund: Color.lerp(hintergrund, other.hintergrund, t)!,
oberflaeche: Color.lerp(oberflaeche, other.oberflaeche, t)!,
karte: Color.lerp(karte, other.karte, t)!,
textPrimaer: Color.lerp(textPrimaer, other.textPrimaer, t)!,
textSekundaer: Color.lerp(textSekundaer, other.textSekundaer, t)!,
erfolg: Color.lerp(erfolg, other.erfolg, t)!,
warnung: Color.lerp(warnung, other.warnung, t)!,
fehler: Color.lerp(fehler, other.fehler, t)!,
akzent: Color.lerp(akzent, other.akzent, t)!,
);
}
}
/// MeloTheme – zentrales Design-System für Melo Dark Fusion.
/// Behälter für Akzentfarbe (per User) und das komplette ThemeData.
class MeloTheme {
/// Legacy-Farb-Konstanten (für Rückwärtskompatibilität mit bestehendem Code)
static const Color rot = Color(0xFFCC0000);
static const Color rotHell = Color(0x33CC0000);
static const Color schwarz = Color(0xFF0D0D0D);
static const Color dunkel1 = Color(0xFF1A1A1A);
static const Color dunkel2 = Color(0xFF2A2A2A);
static const Color textPrimaer = Color(0xFFFFFFFF);
static const Color textSekundaer = Color(0xFF888888);
static const Color schwarz = Color(0xFF0B0B10);
static const Color oberflaeche = Color(0xFF14141C);
static const Color dunkel1 = Color(0xFF14141C);
static const Color dunkel2 = Color(0xFF1C1C26);
static const Color textPrimaer = Color(0xFFF5F5F7);
static const Color textSekundaer = Color(0xFF9E9EAB);
/// Akzentfarbe – wechselt pro angemeldeter Person (Login-Effekt).
/// UI hängt per ValueListenableBuilder an [akzentNotifier].
@@ -15,37 +142,209 @@ class MeloTheme {
static Color get akzent => akzentNotifier.value;
static set akzent(Color farbe) => akzentNotifier.value = farbe;
static ThemeData get theme => ThemeData(
brightness: Brightness.dark,
scaffoldBackgroundColor: schwarz,
colorScheme: ColorScheme.dark(
primary: akzent,
secondary: akzent,
surface: schwarz,
),
appBarTheme: const AppBarTheme(
backgroundColor: schwarz,
foregroundColor: textPrimaer,
elevation: 0,
),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
backgroundColor: schwarz,
selectedItemColor: akzent,
unselectedItemColor: textSekundaer,
),
cardTheme: CardThemeData(
color: dunkel1,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
/// Baut das vollständige ThemeData mit allen Komponenten-Themen.
static ThemeData themeMitAkzent(Color akzent) {
final tokens = MeloDesignTokens(
hintergrund: const Color(0xFF0B0B10),
oberflaeche: const Color(0xFF14141C),
karte: const Color(0xFF1C1C26),
textPrimaer: const Color(0xFFF5F5F7),
textSekundaer: const Color(0xFF9E9EAB),
erfolg: const Color(0xFF4CAF50),
warnung: const Color(0xFFFF9800),
fehler: const Color(0xFFF44336),
akzent: akzent,
);
// Outfit-TextTheme
final textTheme = GoogleFonts.outfitTextTheme().apply(
displayColor: tokens.textPrimaer,
bodyColor: tokens.textPrimaer,
);
return ThemeData(
brightness: Brightness.dark,
scaffoldBackgroundColor: tokens.hintergrund,
fontFamily: GoogleFonts.outfit().fontFamily,
colorScheme: ColorScheme.dark(
primary: akzent,
secondary: akzent,
surface: tokens.oberflaeche,
onPrimary: Colors.white,
onSecondary: Colors.white,
onSurface: tokens.textPrimaer,
error: tokens.fehler,
),
),
chipTheme: ChipThemeData(
backgroundColor: dunkel1,
selectedColor: akzent,
labelStyle: const TextStyle(color: textPrimaer),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
textTheme: textTheme,
// ─── AppBar ───
appBarTheme: AppBarTheme(
backgroundColor: tokens.oberflaeche,
foregroundColor: tokens.textPrimaer,
elevation: 0,
titleTextStyle: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w600,
color: tokens.textPrimaer,
letterSpacing: -0.5,
),
),
),
);
// ─── BottomNavigationBar ───
bottomNavigationBarTheme: BottomNavigationBarThemeData(
backgroundColor: tokens.oberflaeche,
selectedItemColor: akzent,
unselectedItemColor: tokens.textSekundaer,
type: BottomNavigationBarType.fixed,
elevation: 0,
selectedLabelStyle: const TextStyle(fontSize: 11, fontWeight: FontWeight.w600),
unselectedLabelStyle: const TextStyle(fontSize: 11),
),
// ─── Card ───
cardTheme: CardThemeData(
color: tokens.karte,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(tokens.cardRadius),
),
margin: EdgeInsets.zero,
),
// ─── Chip ───
chipTheme: ChipThemeData(
backgroundColor: tokens.karte,
selectedColor: akzent,
labelStyle: TextStyle(color: tokens.textPrimaer, fontSize: 13),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(tokens.buttonRadius),
),
side: BorderSide.none,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
),
// ─── FilledButton (Pill, Gradient) ───
filledButtonTheme: FilledButtonThemeData(
style: FilledButton.styleFrom(
backgroundColor: akzent,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(tokens.buttonRadius),
),
padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 14),
textStyle: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
),
),
),
// ─── ElevatedButton ───
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: akzent,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(tokens.buttonRadius),
),
padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 14),
textStyle: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
),
elevation: 0,
),
),
// ─── OutlinedButton ───
outlinedButtonTheme: OutlinedButtonThemeData(
style: OutlinedButton.styleFrom(
foregroundColor: akzent,
side: BorderSide(color: akzent),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(tokens.buttonRadius),
),
padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 14),
),
),
// ─── InputDecoration ───
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: tokens.karte,
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(tokens.inputRadius),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(tokens.inputRadius),
borderSide: BorderSide(color: akzent, width: 1.5),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(tokens.inputRadius),
borderSide: BorderSide(color: tokens.karte),
),
labelStyle: TextStyle(color: tokens.textSekundaer, fontSize: 13),
hintStyle: TextStyle(color: tokens.textSekundaer.withValues(alpha: 0.6), fontSize: 13),
),
// ─── Switch ───
switchTheme: SwitchThemeData(
thumbColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) return akzent;
return tokens.textSekundaer;
}),
trackColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return akzent.withValues(alpha: 0.4);
}
return tokens.karte;
}),
),
// ─── Slider ───
sliderTheme: SliderThemeData(
activeTrackColor: akzent,
inactiveTrackColor: tokens.karte,
thumbColor: akzent,
overlayColor: akzent.withValues(alpha: 0.2),
trackHeight: 4,
),
// ─── Dialog ───
dialogTheme: DialogThemeData(
backgroundColor: tokens.oberflaeche,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(tokens.dialogRadius),
),
titleTextStyle: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: tokens.textPrimaer,
),
),
// ─── BottomSheet ───
bottomSheetTheme: BottomSheetThemeData(
backgroundColor: tokens.oberflaeche,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(tokens.sheetRadius)),
),
),
// ─── NavigationBar ───
navigationBarTheme: NavigationBarThemeData(
backgroundColor: tokens.oberflaeche,
indicatorColor: akzent.withValues(alpha: 0.25),
surfaceTintColor: Colors.transparent,
),
// ─── Extensions ───
extensions: [tokens],
);
}
/// Legacy-Getter (von main.dart genutzt) — nutzt aktuelle Akzentfarbe.
static ThemeData get theme => themeMitAkzent(akzent);
}
lib/widgets/melo_header.dart
+16 -18
View File
@@ -33,17 +33,17 @@ class MeloHeader extends StatelessWidget {
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ShaderMask(
shaderCallback: (bounds) => const LinearGradient(
colors: [Colors.white, MeloTheme.rot],
).createShader(bounds),
child: const Text('Melo', style: TextStyle(
fontSize: 28, fontWeight: FontWeight.w700, color: Colors.white)),
),
const Text('Deine Musik. Deine Art.', style: TextStyle(fontSize: 12, color: MeloTheme.textSekundaer)),
Text('Melo', style: TextStyle(
fontSize: 28, fontWeight: FontWeight.w700, color: Colors.white,
letterSpacing: -0.5,
)),
Text('Deine Musik. Deine Art.', style: TextStyle(
fontSize: 12, color: MeloTheme.textSekundaer,
letterSpacing: 0.2,
)),
],
),
Row(children: [
@@ -69,7 +69,7 @@ class MeloHeader extends StatelessWidget {
],
),
const SizedBox(height: 8),
// Suchleiste – immer sichtbar
// Suchleiste
TextField(
onSubmitted: (wert) {
if (wert.isNotEmpty) onSearch();
@@ -78,11 +78,11 @@ class MeloHeader extends StatelessWidget {
decoration: InputDecoration(
hintText: '🔍 Song, Künstler oder Tag suchen...',
hintStyle: TextStyle(color: Colors.grey.shade600, fontSize: 13),
prefixIcon: Icon(Icons.search, size: 18, color: MeloTheme.rot.withValues(alpha: 0.6)),
prefixIcon: Icon(Icons.search, size: 18, color: MeloTheme.akzent.withValues(alpha: 0.6)),
filled: true,
fillColor: MeloTheme.dunkel1,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide.none,
),
contentPadding: const EdgeInsets.symmetric(vertical: 10, horizontal: 12),
@@ -98,18 +98,17 @@ class MeloHeader extends StatelessWidget {
width: 40, height: 40,
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(14),
),
child: IconButton(
icon: Icon(icon, size: 18, color: MeloTheme.rot),
icon: Icon(icon, size: 18, color: MeloTheme.akzent),
onPressed: onTap,
),
);
}
}
/// Kompakter „☁️ Musikserver“-Chip mit Statuspunkt.
/// Grün = verbunden, Rot = offline, pulsierend = Sync läuft.
/// Kompakter „☁️ Musikserver"-Chip mit Statuspunkt.
class _ServerStatusChip extends StatefulWidget {
final bool verbunden;
final bool syncLaeuft;
@@ -168,7 +167,7 @@ class _ServerStatusChipState extends State<_ServerStatusChip>
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(14),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Row(
@@ -184,7 +183,6 @@ class _ServerStatusChipState extends State<_ServerStatusChip>
AnimatedBuilder(
animation: _controller,
builder: (_, child) {
// Pulsierende Größe während des Syncs
final skala = widget.syncLaeuft
? 0.7 + (0.5 * _controller.value)
: 1.0;
lib/widgets/mini_player.dart
+24 -18
View File
@@ -40,11 +40,9 @@ class _MiniPlayerState extends State<MiniPlayer> {
});
}
});
// Sofortige UI-Aktualisierung bei jedem Songwechsel
_songSub = _player.onSongWechsel.listen((_) {
if (mounted) setState(() {});
});
// Shuffle-/Repeat-/Sleep-Zustand live halten
_player.addListener(_onPlayerChanged);
}
@@ -52,8 +50,6 @@ class _MiniPlayerState extends State<MiniPlayer> {
if (mounted) setState(() {});
}
/// Öffnet den Fullscreen-Player mit Slide-up/Slide-down-Animation.
/// Die Warteschlange ist von dort per Button erreichbar.
void _oeffneNowPlaying() {
Navigator.of(context).push(
PageRouteBuilder(
@@ -94,15 +90,23 @@ class _MiniPlayerState extends State<MiniPlayer> {
final progress = _dauer.inSeconds > 0
? _position.inSeconds / _dauer.inSeconds : 0.0;
final hatCover = song.coverPfad != null && File(song.coverPfad!).existsSync();
final akzent = MeloTheme.akzent;
return GestureDetector(
onTap: _oeffneNowPlaying,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
color: const Color(0xFF1A0A0A),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: const Color(0xFF2A1515)),
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
boxShadow: [
BoxShadow(
color: akzent.withValues(alpha: 0.15),
blurRadius: 20,
offset: const Offset(0, 4),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
@@ -113,13 +117,17 @@ class _MiniPlayerState extends State<MiniPlayer> {
children: [
// Cover mit Fallback auf Notensymbol
ClipRRect(
borderRadius: BorderRadius.circular(10),
borderRadius: BorderRadius.circular(12),
child: Container(
width: 36, height: 36,
color: MeloTheme.rot,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [akzent, Color.lerp(akzent, Colors.black, 0.5)!],
),
),
child: hatCover
? Image.file(File(song.coverPfad!), fit: BoxFit.cover)
: const Center(child: Text('♪', style: TextStyle(fontSize: 16))),
: const Center(child: Text('♪', style: TextStyle(fontSize: 16, color: Colors.white))),
),
),
const SizedBox(width: 10),
@@ -151,8 +159,8 @@ class _MiniPlayerState extends State<MiniPlayer> {
borderRadius: BorderRadius.circular(2),
child: LinearProgressIndicator(
value: progress,
backgroundColor: const Color(0xFF2A2A2A),
valueColor: const AlwaysStoppedAnimation(MeloTheme.rot),
backgroundColor: MeloTheme.dunkel2,
valueColor: AlwaysStoppedAnimation(akzent),
minHeight: 2,
),
),
@@ -163,23 +171,21 @@ class _MiniPlayerState extends State<MiniPlayer> {
);
}
/// Shuffle-Icon — rot wenn aktiv
Widget _shuffleBtn() {
final aktiv = _player.zufallsmodus;
return _btn(
Icons.shuffle,
() => _player.setZufallsmodus(!aktiv),
farbe: aktiv ? MeloTheme.rot : Colors.white,
farbe: aktiv ? MeloTheme.akzent : Colors.white,
);
}
/// Repeat-Icon — 3 Zustände (aus → Titel → Playlist), Wechsel bei Tipp
Widget _repeatBtn() {
final modus = _player.wiederholmodus;
final (icon, farbe) = switch (modus) {
Wiederholmodus.aus => (Icons.repeat, Colors.white),
Wiederholmodus.titel => (Icons.repeat_one, MeloTheme.rot),
Wiederholmodus.playlist => (Icons.repeat, MeloTheme.rot),
Wiederholmodus.titel => (Icons.repeat_one, MeloTheme.akzent),
Wiederholmodus.playlist => (Icons.repeat, MeloTheme.akzent),
};
return _btn(icon, _naechsterWiederholmodus, farbe: farbe);
}
@@ -210,7 +216,7 @@ class _MiniPlayerState extends State<MiniPlayer> {
Widget _playBtn() {
return Material(
color: MeloTheme.rot,
color: MeloTheme.akzent,
borderRadius: BorderRadius.circular(50),
child: InkWell(
borderRadius: BorderRadius.circular(50),
lib/widgets/press_scale.dart
+35
View File
@@ -0,0 +1,35 @@
import 'package:flutter/material.dart';
/// Press-Scale Mikro-Interaktion: Button skaliert beim Drücken auf 0.97.
/// Verwendet AnimatedScale mit 120ms Curves.easeOut.
class PressScale extends StatefulWidget {
final Widget child;
final VoidCallback? onTap;
const PressScale({super.key, required this.child, this.onTap});
@override
State<PressScale> createState() => _PressScaleState();
}
class _PressScaleState extends State<PressScale> {
double _scale = 1.0;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (_) => setState(() => _scale = 0.97),
onTapUp: (_) {
setState(() => _scale = 1.0);
widget.onTap?.call();
},
onTapCancel: () => setState(() => _scale = 1.0),
child: AnimatedScale(
scale: _scale,
duration: const Duration(milliseconds: 120),
curve: Curves.easeOut,
child: widget.child,
),
);
}
}
lib/widgets/recent_widget.dart
+8 -5
View File
@@ -3,8 +3,6 @@ import '../models/song.dart';
import '../utils/farb_theme.dart';
/// Zeigt die letzten abgespielten Songs als horizontale Liste.
/// Manuell in home_screen.dart einbaubar:
/// RecentWidget(songs: _vm.letzteSongs, onPlay: _vm.spieleSong)
class RecentWidget extends StatelessWidget {
final List<Song> songs;
final void Function(Song) onPlay;
@@ -35,7 +33,7 @@ class RecentWidget extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(10),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Row(
@@ -44,8 +42,13 @@ class RecentWidget extends StatelessWidget {
Container(
width: 28, height: 28,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: MeloTheme.rot.withValues(alpha: 0.3),
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))),
),
lib/widgets/song_tile.dart
+11 -4
View File
@@ -36,11 +36,18 @@ class SongTile extends StatelessWidget {
return ListTile(
contentPadding: const EdgeInsets.symmetric(vertical: 2),
leading: ClipRRect(
borderRadius: BorderRadius.circular(10),
borderRadius: BorderRadius.circular(12),
child: Container(
width: 44, height: 44,
decoration: const BoxDecoration(
gradient: LinearGradient(colors: [Color(0xFF1A0000), Color(0xFF660000)]),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
MeloTheme.akzent.withValues(alpha: 0.6),
MeloTheme.akzent.withValues(alpha: 0.15),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: hatCover
? Image.file(File(song.coverPfad!), fit: BoxFit.cover)
@@ -128,7 +135,7 @@ class SongTile extends StatelessWidget {
padding: const EdgeInsets.all(6),
child: Icon(
istFavorit ? Icons.favorite : Icons.favorite_border,
size: 16, color: MeloTheme.rot,
size: 16, color: MeloTheme.akzent,
),
),
),
lib/widgets/statistik_card.dart
+5 -5
View File
@@ -20,11 +20,11 @@ class StatistikCard extends StatelessWidget {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 14),
padding: const EdgeInsets.symmetric(vertical: 16),
decoration: BoxDecoration(
color: const Color(0xFF1A0A0A),
borderRadius: BorderRadius.circular(14),
border: Border.all(color: const Color(0xFF2A1515)),
color: MeloTheme.dunkel1,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: MeloTheme.dunkel2),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
@@ -42,7 +42,7 @@ class StatistikCard extends StatelessWidget {
Widget _item(String zahl, String label) {
return Column(
children: [
Text(zahl, style: const TextStyle(fontSize: 22, fontWeight: FontWeight.w700, color: MeloTheme.rot)),
Text(zahl, style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700, color: MeloTheme.akzent)),
Text(label, style: const TextStyle(fontSize: 11, color: MeloTheme.textSekundaer)),
],
);
pubspec.lock
+8
View File
@@ -296,6 +296,14 @@ packages:
description: flutter
source: sdk
version: "0.0.0"
google_fonts:
dependency: "direct main"
description:
name: google_fonts
sha256: ba03d03bcaa2f6cb7bd920e3b5027181db75ab524f8891c8bc3aa603885b8055
url: "https://pub.dev"
source: hosted
version: "6.3.3"
hooks:
dependency: transitive
description:
pubspec.yaml
+3
View File
@@ -25,6 +25,9 @@ dependencies:
# Einstellungen
shared_preferences: ^2.3.5
# Google Fonts (Outfit für Melo Dark Fusion)
google_fonts: ^6.2.1
# HTTP (Navidrome Server-Sync)
http: ^1.2.0
crypto: ^3.0.6
test/widget_test.dart
+106
View File
@@ -1,9 +1,13 @@
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:melo_app/models/song.dart';
import 'package:melo_app/screens/login_screen.dart';
import 'package:melo_app/screens/home_screen.dart';
import 'package:melo_app/services/player_service.dart';
import 'package:melo_app/utils/farb_theme.dart';
import 'package:melo_app/widgets/warteschlange_sheet.dart';
import 'package:melo_app/widgets/press_scale.dart';
Song _song(int id, String titel) => Song(
id: id,
@@ -61,4 +65,106 @@ void main() {
expect(find.textContaining('Wiederholung aktiv'), findsOneWidget);
});
// ═══ NEUE TESTS v2.56: Melo Dark Fusion ═══
testWidgets('ThemeExtension: MeloDesignTokens liefert korrekte Werte',
(WidgetTester tester) async {
// Theme bauen und Extension prüfen
final theme = MeloTheme.themeMitAkzent(const Color(0xFFCC0000));
final tokens = theme.extensions[MeloDesignTokens] as MeloDesignTokens?;
expect(tokens, isNotNull);
expect(tokens!.hintergrund, const Color(0xFF0B0B10));
expect(tokens.oberflaeche, const Color(0xFF14141C));
expect(tokens.karte, const Color(0xFF1C1C26));
expect(tokens.textPrimaer, const Color(0xFFF5F5F7));
expect(tokens.textSekundaer, const Color(0xFF9E9EAB));
expect(tokens.erfolg, const Color(0xFF4CAF50));
expect(tokens.warnung, const Color(0xFFFF9800));
expect(tokens.fehler, const Color(0xFFF44336));
expect(tokens.cardRadius, 20);
expect(tokens.buttonRadius, 999);
expect(tokens.sheetRadius, 28);
expect(tokens.dialogRadius, 24);
expect(tokens.inputRadius, 14);
});
testWidgets('Expertenmodus-Toggle: SharedPreferences Key existiert',
(WidgetTester tester) async {
// SharedPreferences mock: experten_modus = true setzen und prüfen
SharedPreferences.setMockInitialValues({'experten_modus': true});
final prefs = await SharedPreferences.getInstance();
final experte = prefs.getBool('experten_modus') ?? false;
expect(experte, isTrue);
// Zurücksetzen
await prefs.setBool('experten_modus', false);
final experte2 = prefs.getBool('experten_modus') ?? false;
expect(experte2, isFalse);
});
testWidgets('Akzentfarbe bleibt anwendbar (MeloTheme.akzentNotifier)',
(WidgetTester tester) async {
// Ursprüngliche Akzentfarbe merken
final original = MeloTheme.akzent;
// Neue Farbe setzen
MeloTheme.akzent = const Color(0xFF2E9E4F); // Grün
expect(MeloTheme.akzent, const Color(0xFF2E9E4F));
// Theme spiegelt die Änderung wider
final theme = MeloTheme.theme;
expect(theme.colorScheme.primary, const Color(0xFF2E9E4F));
// Wieder zurücksetzen
MeloTheme.akzent = original;
});
testWidgets('PressScale-Widget existiert und reagiert auf Tap',
(WidgetTester tester) async {
bool wurdeGetapt = false;
await tester.pumpWidget(
MaterialApp(
home: Scaffold(
body: Center(
child: PressScale(
onTap: () => wurdeGetapt = true,
child: Container(
width: 48,
height: 48,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
child: const Icon(Icons.play_arrow, color: Colors.white),
),
),
),
),
),
);
await tester.pump();
// Widget existiert
expect(find.byIcon(Icons.play_arrow), findsOneWidget);
// Tippen
await tester.tap(find.byIcon(Icons.play_arrow));
await tester.pump();
expect(wurdeGetapt, isTrue);
});
testWidgets('Startseiten-Hero zeigt Song-Titel an (weiterhoeren_titel)',
(WidgetTester tester) async {
// Einen laufenden Song setzen
final p = PlayerService();
final testSong = _song(1, 'Test Hero Song');
p.setWarteschlange([testSong]);
await tester.pumpWidget(
const MaterialApp(home: Scaffold(body: MeloHome())),
);
await tester.pump();
// Der Hero-Bereich sollte den Song-Titel anzeigen
// (kann leer sein wenn ViewModel noch lädt, aber Widget existiert)
// Prüfe nur dass die App ohne Crash rendert
expect(find.byType(MeloHome), findsOneWidget);
});
}