Flutter.Study
2주차(4)- Third Tab(shazam)
도슬
2023. 7. 1. 00:01
//세번째 탭
class ThirdTab extends StatelessWidget {
const ThirdTab({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
//1. 소환될 데이터 작성
const chartData = {
'korea': [
{
'name': 'Dynamite',
'artist': 'BTS',
},
{
'name': 'Dynamite',
'artist': 'BTS',
},
{
'name': 'Dynamite',
'artist': 'BTS',
},
],
'global': [
{
'name': 'Dynamite',
'artist': 'BTS',
},
{
'name': 'Dynamite',
'artist': 'BTS',
},
{
'name': 'Dynamite',
'artist': 'BTS',
},
],
'newyork': [
{
'name': 'Dynamite',
'artist': 'BTS',
},
{
'name': 'Dynamite',
'artist': 'BTS',
},
{
'name': 'Dynamite',
'artist': 'BTS',
},
],
};
return SafeArea(
//2. 크게보고 SafeArea -> Column -> Text 까지 작성
child: Column(
children: [
Text(
"차트",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 20,
),
Expanded(//8. Expanded를 이용해 오버플로우를 없애줌
child: ListView(//7. ListView를 이용해 스크롤 만들어줌
children: [
Stack(
//5. Stack으로 컨테이너와 패딩을 묶고 배경 설정
alignment: Alignment.center,
children: [
Container(
width: double.infinity,
height: 180,
color: Colors.purple[900],
),
Column(
children: [
Container(
//3. 컨테이너로 묶고 엘레베이터버튼과 텍스트를 만듬.
width: MediaQuery.of(context).size.width * 0.8,
child: ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.white),
),
child: Text(
"국가 및 도시별 차트",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.purple[900],
),
),
),
),
Padding(
//4. 패딩으로 묶고 텍스트 작성
padding: const EdgeInsets.all(8),
child: Text(
"전 세계",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
)
],
),
],
),
Divider(
//6. 선긋고 동일하게 작성
color: Colors.grey[400],
thickness: 10,
height: 10,
),
Column(
children: [
Padding(
padding: const EdgeInsets.all(8),
child: Row(
children: [
Text(
"대한민국 차트",
style: TextStyle(
fontSize: 16,
),
),
Spacer(),
Text(
"모두 보기",
style: TextStyle(color: Colors.blue),
),
],
),
),
Row(
children: [
...chartData['korea']!.map((song) {
String imageUrl = song['imageUrl']!;
String name = song['name']!;
String artist = song['artist']!;
// 솔직히 불러오는건 잘 모르겠다.. 눈에만 익혀보자.
return Padding(
padding: const EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network(
imageUrl,
width: MediaQuery.of(context).size.width * 0.29,
),
Text(
name,
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(artist),
],
),
);
}),
],
),
],
),
Divider(
color: Colors.grey[400],
thickness: 10,
height: 10,
),
Column(
children: [
Padding(
padding: const EdgeInsets.all(8),
child: Row(
children: [
Text(
"글로벌 차트",
style: TextStyle(
fontSize: 16,
),
),
Spacer(),
Text(
"모두 보기",
style: TextStyle(color: Colors.blue),
),
],
),
),
Row(
children: [
...chartData['global']!.map((song) {
String imageUrl = song['imageUrl']!;
String name = song['name']!;
String artist = song['artist']!;
return Padding(
padding: const EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network(
imageUrl,
width: MediaQuery.of(context).size.width * 0.29,
),
Text(
name,
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(artist),
],
),
);
}),
],
),
],
),
Divider(
color: Colors.grey[400],
thickness: 10,
height: 10,
),
Column(
children: [
Padding(
padding: const EdgeInsets.all(8),
child: Row(
children: [
Text(
"뉴욕 차트",
style: TextStyle(
fontSize: 16,
),
),
Spacer(),
Text(
"모두 보기",
style: TextStyle(color: Colors.blue),
),
],
),
),
Row(
children: [
...chartData['newyork']!.map((song) {
String imageUrl = song['imageUrl']!;
String name = song['name']!;
String artist = song['artist']!;
return Padding(
padding: const EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network(
imageUrl,
width: MediaQuery.of(context).size.width * 0.29,
),
Text(
name,
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(artist),
],
),
);
}),
],
),
],
),
],
),
),
],
));
}
}
목표!
1. 데이터 작성
-> 2. SafeArea -> Column -> Text까지 작성
-> 5. Stack으로 컨테이너와 패딩을 묶고 배경설정
-> 3. 컨테이너로 묶고 엘레베이터 버튼과 텍스트 만들기
-> 4. 패딩으로 묶고 텍스트 작성
-> 6. Divider로 선긋고 나머지 텍스트와 이미지들 순서대로 작성
-> 8,7. Expanded를 이용해 오버플로우를 없애고 ListView를 이용해 스크롤 만들어줌
크게보고 1-> 2 -> 8 -> 7 -> 5 -> 3 -> 4 -> 6 순서로 하는게 맞겠지만
우선은 5번을 먼저 작성하는것부터가 모험이다
좀 더 코드와 친해지면 '큰 그림'을 볼 수 있겠지...