feat: music page mood cards UI redesign + mystery shimmer + lyrics readability
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
seaislee1209
parent
f9666d4aa3
commit
4898d46f9c
@ -65,6 +65,7 @@ class _MusicCreationPageState extends State<MusicCreationPage>
|
||||
late AnimationController _flipController;
|
||||
late Animation<double> _flipAnimation;
|
||||
late AnimationController _genRingController;
|
||||
late AnimationController _mysteryShimmerController;
|
||||
|
||||
// ── Playlist Data (matching HTML) ──
|
||||
final List<_Track> _playlist = [
|
||||
@ -108,7 +109,7 @@ class _MusicCreationPageState extends State<MusicCreationPage>
|
||||
{'icon': Icons.directions_run, 'color': 0xFFF5C6A5, 'title': 'Happy Funk', 'desc': '活力 · 奔跑 · 阳光'},
|
||||
{'icon': Icons.nights_stay_outlined, 'color': 0xFFCBB8E0, 'title': 'Deep Sleep', 'desc': '白噪音 · 助眠 · 梦境'},
|
||||
{'icon': Icons.psychology_outlined, 'color': 0xFFA8D8C8, 'title': 'Focus Flow', 'desc': '心流 · 专注 · 效率'},
|
||||
{'icon': Icons.redeem_outlined, 'color': 0xFFF5B0B0, 'title': '盲盒惊喜', 'desc': 'AI 随机生成神曲'},
|
||||
{'icon': Icons.redeem_outlined, 'color': 0xFFD4A0E8, 'title': '盲盒惊喜', 'desc': 'AI 随机生成神曲'},
|
||||
{'icon': Icons.auto_awesome, 'color': 0xFFECCFA8, 'title': '自由创作', 'desc': '输入灵感 · 生成音乐'},
|
||||
];
|
||||
|
||||
@ -153,6 +154,12 @@ class _MusicCreationPageState extends State<MusicCreationPage>
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
// Mystery box diagonal shimmer — 3s loop
|
||||
_mysteryShimmerController = AnimationController(
|
||||
duration: const Duration(milliseconds: 3000),
|
||||
vsync: this,
|
||||
)..repeat();
|
||||
|
||||
// ── Audio Player Setup ──
|
||||
_audioPlayer = AudioPlayer();
|
||||
|
||||
@ -222,6 +229,7 @@ class _MusicCreationPageState extends State<MusicCreationPage>
|
||||
_tonearmController.dispose();
|
||||
_flipController.dispose();
|
||||
_genRingController.dispose();
|
||||
_mysteryShimmerController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@ -336,6 +344,7 @@ class _MusicCreationPageState extends State<MusicCreationPage>
|
||||
|
||||
setState(() {
|
||||
_isGenerating = false;
|
||||
_selectedMoodIndex = null; // 生成完成，取消选中态
|
||||
});
|
||||
|
||||
// If already playing, show confirm dialog; otherwise auto-play
|
||||
@ -683,25 +692,27 @@ class _MusicCreationPageState extends State<MusicCreationPage>
|
||||
child: CustomPaint(
|
||||
painter: _VinylBackGroovesPainter(),
|
||||
child: Center(
|
||||
// HTML: .lyrics-container { width: 150px; height: 150px; overflow-y: auto; }
|
||||
child: SizedBox(
|
||||
child: Container(
|
||||
width: 150,
|
||||
height: 150,
|
||||
decoration: BoxDecoration(
|
||||
// Dark overlay to cover groove lines behind text
|
||||
color: const Color(0xFF18181B).withOpacity(0.75),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: SingleChildScrollView(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: Text(
|
||||
track.lyrics.isNotEmpty
|
||||
? track.lyrics
|
||||
: '生成音乐后\n点我看歌词',
|
||||
// HTML: .lyrics-content { color: rgba(255,255,255,0.75);
|
||||
// font-size: 11px; line-height: 1.5; text-align: center; }
|
||||
style: GoogleFonts.dmSans(
|
||||
fontSize: 11,
|
||||
height: 1.5,
|
||||
fontSize: 12,
|
||||
height: 1.6,
|
||||
color: track.lyrics.isNotEmpty
|
||||
? Colors.white.withOpacity(0.75)
|
||||
: Colors.white.withOpacity(0.35),
|
||||
? Colors.white.withOpacity(0.92)
|
||||
: Colors.white.withOpacity(0.4),
|
||||
fontStyle: track.lyrics.isEmpty
|
||||
? FontStyle.italic
|
||||
: FontStyle.normal,
|
||||
@ -917,132 +928,175 @@ class _MusicCreationPageState extends State<MusicCreationPage>
|
||||
Widget _buildMoodCard(int index) {
|
||||
final mood = _moods[index];
|
||||
final isActive = _selectedMoodIndex == index;
|
||||
final isMystery = index == 4;
|
||||
final isCustom = index == 5;
|
||||
final themeColor = Color(mood['color'] as int);
|
||||
final isMystery = index == 4; // 盲盒惊喜
|
||||
final isCustom = index == 5; // 自由创作
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () => _selectMood(index),
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
curve: const Cubic(0.25, 0.46, 0.45, 0.94), // HTML transition curve
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||||
decoration: BoxDecoration(
|
||||
// HTML: .mood-card { background: var(--glass-bg); backdrop-filter: blur(16px);
|
||||
// border: 1px solid var(--glass-border); border-radius: 14px; }
|
||||
color: isActive
|
||||
? Colors.white
|
||||
: isMystery
|
||||
? null
|
||||
: Colors.white.withOpacity(0.65),
|
||||
// HTML: .mood-card.mystery { background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(236,207,168,0.3)) }
|
||||
gradient: isMystery && !isActive
|
||||
? LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
Colors.white.withOpacity(0.7),
|
||||
const Color(0xFFECCFA8).withOpacity(0.3),
|
||||
],
|
||||
)
|
||||
: null,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
// HTML: .mood-card.active { border-color: #ECCFA8; }
|
||||
// HTML: .mood-card.custom { border: 1px dashed var(--primary-color); }
|
||||
color: isActive
|
||||
? const Color(0xFFECCFA8)
|
||||
: isCustom
|
||||
? const Color(0xFFECCFA8).withOpacity(0.5)
|
||||
: Colors.white.withOpacity(0.4),
|
||||
width: 1,
|
||||
),
|
||||
// HTML: .mood-card.active { box-shadow: 0 10px 25px -5px rgba(236,207,168,0.4); }
|
||||
boxShadow: isActive
|
||||
? [
|
||||
BoxShadow(
|
||||
color: const Color(0xFFECCFA8).withOpacity(0.4),
|
||||
offset: const Offset(0, 10),
|
||||
blurRadius: 25,
|
||||
spreadRadius: -5,
|
||||
),
|
||||
]
|
||||
: [
|
||||
// HTML: .mood-card { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.01); }
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.01),
|
||||
offset: const Offset(0, 4),
|
||||
blurRadius: 6,
|
||||
spreadRadius: -1,
|
||||
),
|
||||
],
|
||||
// ── Card background color logic ──
|
||||
Color cardColor;
|
||||
if (isCustom) {
|
||||
// 自由创作: white glass morphism
|
||||
cardColor = isActive
|
||||
? Colors.white
|
||||
: Colors.white.withOpacity(0.65);
|
||||
} else if (isMystery) {
|
||||
// 盲盒惊喜: richer purple tint, more eye-catching
|
||||
cardColor = isActive
|
||||
? Color.lerp(Colors.white, themeColor, 0.40)!
|
||||
: Color.lerp(Colors.white.withOpacity(0.50), themeColor, 0.30)!;
|
||||
} else {
|
||||
// Normal mood cards: themed tint
|
||||
cardColor = isActive
|
||||
? Color.lerp(Colors.white, themeColor, 0.30)!
|
||||
: Color.lerp(Colors.white.withOpacity(0.55), themeColor, 0.20)!;
|
||||
}
|
||||
|
||||
// ── Border color logic ──
|
||||
Color borderColor;
|
||||
if (isCustom) {
|
||||
borderColor = isActive
|
||||
? const Color(0xFFECCFA8)
|
||||
: Colors.white.withOpacity(0.4);
|
||||
} else {
|
||||
borderColor = isActive
|
||||
? themeColor.withOpacity(0.55)
|
||||
: themeColor.withOpacity(0.18);
|
||||
}
|
||||
|
||||
final cardBody = AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
curve: const Cubic(0.25, 0.46, 0.45, 0.94),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||||
decoration: BoxDecoration(
|
||||
color: cardColor,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
color: borderColor,
|
||||
width: isActive ? 1.5 : 1,
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
// Icon circle
|
||||
Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: Color(mood['color'] as int).withOpacity(0.4),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Icon(
|
||||
mood['icon'] as IconData,
|
||||
size: 20,
|
||||
color: Color(mood['color'] as int).withOpacity(1.0),
|
||||
),
|
||||
boxShadow: isActive
|
||||
? [
|
||||
BoxShadow(
|
||||
color: (isCustom ? const Color(0xFFECCFA8) : themeColor)
|
||||
.withOpacity(0.30),
|
||||
offset: const Offset(0, 6),
|
||||
blurRadius: 18,
|
||||
spreadRadius: -4,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
// Title + Desc
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
mood['title'] as String,
|
||||
style: GoogleFonts.outfit(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: const Color(0xFF374151),
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
mood['desc'] as String,
|
||||
style: GoogleFonts.dmSans(
|
||||
fontSize: 10,
|
||||
color: const Color(0xFF9CA3AF),
|
||||
height: 1.2,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
]
|
||||
: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.03),
|
||||
offset: const Offset(0, 2),
|
||||
blurRadius: 8,
|
||||
spreadRadius: -1,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
mood['icon'] as IconData,
|
||||
size: 24,
|
||||
color: isActive
|
||||
? (isCustom ? const Color(0xFFECCFA8) : themeColor)
|
||||
: themeColor,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
mood['title'] as String,
|
||||
style: GoogleFonts.outfit(
|
||||
fontSize: 14,
|
||||
fontWeight: isActive ? FontWeight.w700 : FontWeight.w600,
|
||||
color: isActive
|
||||
? const Color(0xFF1F2937)
|
||||
: const Color(0xFF374151),
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
mood['desc'] as String,
|
||||
style: GoogleFonts.dmSans(
|
||||
fontSize: 11,
|
||||
color: isActive
|
||||
? const Color(0xFF6B7280)
|
||||
: const Color(0xFF9CA3AF),
|
||||
height: 1.3,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
// Active dot
|
||||
if (isActive)
|
||||
Positioned(
|
||||
top: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
width: 8,
|
||||
height: 8,
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFFC99672),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () => _selectMood(index),
|
||||
child: Stack(
|
||||
children: [
|
||||
// Main card body
|
||||
cardBody,
|
||||
// ── Mystery box: soft diagonal gleam ──
|
||||
if (isMystery)
|
||||
Positioned.fill(
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
child: IgnorePointer(
|
||||
child: AnimatedBuilder(
|
||||
animation: _mysteryShimmerController,
|
||||
builder: (context, _) {
|
||||
final t = _mysteryShimmerController.value;
|
||||
// Wide, soft sweep — barely visible glow
|
||||
final sweep = -2.0 + t * 5.0;
|
||||
return Opacity(
|
||||
opacity: 0.35,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment(sweep - 1.2, sweep - 1.2),
|
||||
end: Alignment(sweep + 1.2, sweep + 1.2),
|
||||
colors: [
|
||||
Colors.white.withOpacity(0.0),
|
||||
Colors.white.withOpacity(0.08),
|
||||
Colors.white.withOpacity(0.18),
|
||||
Colors.white.withOpacity(0.08),
|
||||
Colors.white.withOpacity(0.0),
|
||||
],
|
||||
stops: const [0.0, 0.25, 0.5, 0.75, 1.0],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Active indicator dot — top-right
|
||||
if (isActive)
|
||||
Positioned(
|
||||
top: 8,
|
||||
right: 8,
|
||||
child: Container(
|
||||
width: 8,
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
color: isCustom ? const Color(0xFFECCFA8) : themeColor,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user