카테고리 없음
유튜브 뮤직앱UI 만들기
신승호.
2023. 2. 2. 13:57
수업 다 듣고 코드설명과 배운것들 수정하겠습니다..
아래는 메인코드
import 'package:flutter/material.dart';
import 'package:youtube_app/MusicTile.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black87,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
leading: Icon(Icons.arrow_back),
title: Text(
'아워리스트',
style: TextStyle(fontSize: 20, color: Colors.white),
),
actions: [
Padding(
padding: const EdgeInsets.all(16),
child: Icon(Icons.airplay),
),
Padding(
padding: const EdgeInsets.all(16),
child: Icon(Icons.search),
),
],
),
body: ListView(
children: [
MusicTile(
musictitle: 'Come with me',
singer: 'Surfaces 및 salem ilese',
imgAssets: 'assets/images/music_come_with_me.png',
pTime: ' ● 3:00'),
MusicTile(
musictitle: 'Good day',
singer: 'Surfaces',
imgAssets: 'assets/images/music_good_day.png',
pTime: ' ● 3:00'),
MusicTile(
musictitle: 'Honesty',
singer: 'Pink Sweat\$',
imgAssets: 'assets/images/music_honesty.png',
pTime: ' ● 3:09'),
MusicTile(
musictitle: 'I Wish I Missed My Ex',
singer: '마할리아 버크마',
imgAssets: 'assets/images/music_i_wish_i_missed_my_ex.png',
pTime: ' ● 3:24'),
MusicTile(
musictitle: 'Plastic Plants',
singer: '마할리아 버크마',
imgAssets: 'assets/images/music_plastic_plants.png',
pTime: ' ● 3:20'),
MusicTile(
musictitle: 'Sucker for you',
singer: '맷 테리',
imgAssets: 'assets/images/music_sucker_for_you.png',
pTime: ' ● 3:24'),
MusicTile(
musictitle: 'Summer is for falling in love',
singer: 'Sarah Kang & Eye Love asdfdsfsdf',
imgAssets:
'assets/images/music_summer_is_for_falling_in_love.png',
pTime: ' ● 3:00'),
MusicTile(
musictitle:
'These days(feat. Jess Glynne, Macklemore & Dan Caplen)',
singer: 'Rudimental',
imgAssets: 'assets/images/music_these_days.png',
pTime: ' ● 3:00'),
MusicTile(
musictitle: 'Zombie Pop',
singer: 'DRP IAN',
imgAssets: 'assets/images/music_zombie_pop.png',
pTime: ' ● 3:00'),
],
),
bottomSheet: Container(
color: Colors.black87,
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
leading: Image.asset('assets/images/music_you_make_me.png'),
title: Text(
'You Make Me',
style: TextStyle(color: Colors.white),
),
subtitle: Text(
'Day6',
style: TextStyle(color: Colors.grey),
),
trailing: Wrap(
spacing: 8,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.arrow_right,
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.skip_next,
color: Colors.white,
),
)
],
),
),
Row(
children: [
Container(
width: 30,
height: 1,
decoration: BoxDecoration(color: Colors.white),
),
Expanded(
child: Container(
height: 1,
decoration: BoxDecoration(color: Colors.white54),
),
)
],
),
],
),
)),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.white10,
currentIndex: 2,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home_outlined,
color: Colors.white,
),
label: '홈',
activeIcon: Icon(Icons.home) //선택됐을때의 아이콘
),
BottomNavigationBarItem(
icon: Icon(
Icons.explore_outlined,
color: Colors.white,
),
label: '둘러보기',
activeIcon: Icon(Icons.explore)),
BottomNavigationBarItem(
icon: Icon(
Icons.library_music_outlined,
color: Colors.white,
),
label: '보관함',
activeIcon: Icon(Icons.library_music)),
],
selectedItemColor: Colors.white,
unselectedLabelStyle: TextStyle(color: Colors.white), //이게 선택안됐을때 라벨 색같은데..
),
),
);
}
}
아래가 MusicTile
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
class MusicTile extends StatelessWidget {
const MusicTile(
{super.key,
required this.musictitle,
required this.singer,
required this.imgAssets,
required this.pTime});
final String musictitle;
final String singer;
final String imgAssets;
final String pTime;
@override
Widget build(BuildContext context) {
return ListTile(
title: Text(
musictitle,
style: TextStyle(color: Colors.white),
maxLines: 2,
),
subtitle: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 3),
child: Icon(
Icons.check_circle_rounded,
color: Colors.white,
size: 15,
),
),
Flexible(
child: Text(
singer,
style: TextStyle(color: Colors.grey),
overflow: TextOverflow.ellipsis,
),
),
Text(
pTime,
style: TextStyle(color: Colors.grey),
)
],
),
leading: Image.asset(imgAssets),
trailing: Icon(
Icons.more_vert,
color: Colors.white,
),
);
}
}
