caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(app): 곡 상세 화면 UI 개선

Browse source 
- 액션바 제목 '트랙' → '앨범'
- YouTube 버튼: 빨간 배경 + 흰색 글씨로 변경
- 각 섹션(헤더, 영상, 크레딧, 가사)에 흰색 카드 배경 추가
- 앨범 이름 ellipsis 제거 (줄바꿈 허용)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-04-04 13:14:36 +09:00
parent 45e69a9b9c
commit 68a0f89816
1 changed files with 38 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
app/lib/views/album/track_detail_view.dart
View file

@ -72,7 +72,7 @@ class _TrackDetailViewState extends State<TrackDetailView> {
icon: const Icon(LucideIcons.arrowLeft), icon: const Icon(LucideIcons.arrowLeft),
onPressed: () => context.pop(), onPressed: () => context.pop(),
), ),
title: const Text('트랙', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600)), title: const Text('앨범', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600)),
), ),
body: FutureBuilder<TrackDetail>( body: FutureBuilder<TrackDetail>(
future: _trackFuture, future: _trackFuture,
@ -162,8 +162,13 @@ class _TrackHeader extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Padding( return Container(
margin: const EdgeInsets.fromLTRB(16, 16, 16, 8),
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
child: Row( child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -255,8 +260,6 @@ class _TrackHeader extends StatelessWidget {
fontSize: 13, fontSize: 13,
color: AppColors.textSecondary, color: AppColors.textSecondary,
), ),
maxLines: 1,
overflow: TextOverflow.ellipsis,
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
// 재생 시간 // 재생 시간
@ -300,8 +303,13 @@ class _MusicVideoSection extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Padding( return Container(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 16), margin: const EdgeInsets.fromLTRB(16, 0, 16, 8),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -343,17 +351,20 @@ class _MusicVideoSection extends StatelessWidget {
), ),
), ),
), ),
const SizedBox(height: 8), const SizedBox(height: 10),
// YouTube에서 보기 버튼 // YouTube에서 보기 버튼
SizedBox( SizedBox(
width: double.infinity, width: double.infinity,
child: TextButton.icon( child: ElevatedButton.icon(
onPressed: onTap, onPressed: onTap,
icon: const Icon(LucideIcons.externalLink, size: 14), icon: const Icon(LucideIcons.youtube, size: 18),
label: const Text('YouTube에서 보기', style: TextStyle(fontSize: 13)), label: const Text('YouTube에서 보기', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
style: TextButton.styleFrom( style: ElevatedButton.styleFrom(
foregroundColor: Colors.red, backgroundColor: Colors.red,
padding: const EdgeInsets.symmetric(vertical: 8), foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
elevation: 0,
), ),
), ),
), ),
@ -377,8 +388,13 @@ class _CreditSection extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Padding( return Container(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 16), margin: const EdgeInsets.fromLTRB(16, 0, 16, 8),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -519,8 +535,13 @@ class _LyricsSection extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Padding( return Container(
padding: const EdgeInsets.symmetric(horizontal: 16), margin: const EdgeInsets.fromLTRB(16, 0, 16, 8),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [