7일차 과제 | 유튜브뮤직 앱 화면 제작
음악명은 최대 2줄까지만 가능하다.
가수명과 플레이시간은 최대 1줄까지만 가능하며 필요한 경우 가수명을 줄인다
음악의 정보를 보여주는 위젯을 만들고, 이름은 MusicTile로 한다
import 'package:flutter/material.dart';
import 'MusciTile.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
leading: Icon(
color: Colors.white,
size: 15,
Icons.arrow_back_ios),
title: Text(style: TextStyle(color: Colors.white),'아워리스트'),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(color: Colors.white,Icons.tv),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(color: Colors.white, Icons.search),
)
],
shadowColor: Colors.grey,
elevation: 2,
),
body:
ListView(
children: [
MusicTile(
ImageUrl: 'assets/music_come_with_me.png',
name: 'Come with me',
subtitle: 'Surfaces 및 salem ilese · 3:00 '
),
MusicTile(
ImageUrl: 'assets/music_good_day.png',
name: 'Good day',
subtitle: 'Surfaces · 3:00'
),
MusicTile(
ImageUrl: 'assets/music_honesty.png',
name: 'Honesty',
subtitle: 'Pink Sweat$ · 3:09'
),
MusicTile(
ImageUrl: 'assets/music_i_wish_i_missed_my_ex.png',
name: 'I Wish I Missed My Ex',
subtitle: ' 마할리아 버크마 · 3:24'
),
MusicTile(
ImageUrl: 'assets/music_plastic_plants.png',
name: 'Plastic Plants',
subtitle: '마할리아 버크마 · 3:20'
),
MusicTile(
ImageUrl: 'assets/music_sucker_for_you.png',
name: 'Sucker for you',
subtitle: '맷 테리 · 3:00'
),
MusicTile(
ImageUrl: 'assets/music_summer_is_for_falling_in_love.png',
name: 'Summer is for falling in love',
subtitle: 'Sarah Kang & Eye Love Brandon · 3:00'
),
MusicTile(
ImageUrl: 'assets/music_these_days.png',
name: 'These days(feat. Jess Glynne, Macklemore & Dan Caplen)',
subtitle: 'Rudimental · 3:00'
),
MusicTile(
ImageUrl: 'assets/music_you_make_me.png',
name: 'You Make Me',
subtitle: 'DAY6 · 3:00'
),
MusicTile(
ImageUrl: 'assets/music_zombie_pop.png',
name: 'Zombie Pop' ,
subtitle: 'DRP IAN · 3:00'
),
]
),
bottomSheet: ListTile(
tileColor: Colors.grey[900],
leading: Image.asset('assets/music_you_make_me.png'),
title: Text('You Make Me', style: TextStyle(color: Colors.white)),
subtitle: Text('DAY6', style: TextStyle(color: Colors.grey)),
trailing : Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.play_arrow, color: Colors.white),
SizedBox(width: 8,),
Icon(Icons.skip_next, color: Colors.white),
],
),
shape: Border(bottom: BorderSide(color: Colors.white)),
),
bottomNavigationBar: BottomNavigationBar(
unselectedItemColor: Colors.grey,
selectedItemColor: Colors.grey,
backgroundColor: Colors.grey[900],
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: '홈'),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: '둘러보기'),
BottomNavigationBarItem(
icon: Icon(Icons.library_music_sharp),
label: '보관함')
],
),
)
);
}
}
