* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
숙제 Shazam 코드 보충 설명 요청 드립니다.
...widget.chartData['korea']!.map((song){~~~ }
저 song이 어디서 나온거죠? 입문자도 이해할 수 있도록 설명 해주시면 좋을거 같아요!!
그리고, 아래 부분 차트 목록명도 변수 처리 해보고 싶은데 방법을 잘 모르겠습니다.
도와주세요.. ㅠ
작성한 코드 및 에러 메세지
// 리스트 한줄 위젯으로 분리
import 'package:flutter/material.dart';
class ListRow extends StatefulWidget {
const ListRow({
super.key,
required this.chartData,
});
// final String chartName; //차트이름
final Map<String, List<Map<String, String>>> chartData;
@override
State<ListRow> createState() => _ListRowState();
}
class _ListRowState extends State<ListRow> {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(width: 8),
const Text(
'Chart Name',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
Spacer(),
TextButton(
onPressed: (){
// Click go Chart Detail
},
child: const Text(
'모두 보기',
)
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
...widget.chartData['korea']!.map((song) {
// 스프레드 연산자: 리스트 등의 이터러블 안에 있는 요소를 분해한다.
String imageUrl = song['imageUrl']!;
String name = song['name']!;
String artist = song['artist']!;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network(
imageUrl,
width:
MediaQuery.of(context).size.width * 0.29,
),
Text(
name,
style: const TextStyle(fontWeight: FontWeight.bold),
),
Text(artist),
],
),
);
}),
],
),
],
),
);
}
}//End
// 세번째 페이지
import 'package:flutter/material.dart';
import 'listRow.dart';
class ThirdTab extends StatelessWidget {
const ThirdTab({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const chartData = {
'korea': [
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite',
'artist': 'BTS',
},
],
'global': [
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite',
'artist': 'BTS',
},
],
'newyork': [
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite',
'artist': 'BTS',
},
],
};
return SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
GestureDetector(
onTap: () {
DefaultTabController.of(context).animateTo(1);
},
child: const Icon(Icons.arrow_back_ios_outlined)
),
const Text(
'차트',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
const Icon(null),
],
),
const SizedBox(height: 20),
Expanded(
child: ListView(
children: [
Stack(
alignment: Alignment.center,
children: [
Container(
width: double.infinity,
height: 200,
// color: const Color.fromARGB(255, 64, 16, 146),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
const Color.fromARGB(255, 64, 16, 146),
Colors.purple[700]!,
Colors.purple[300]!,
Colors.purple[50]!,
],
tileMode: TileMode.mirror,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
//Click Event
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.white),
),
child: Text(
"국가 및 도시별 차트",
style: TextStyle(
color: Colors.purple[900],
fontWeight: FontWeight.bold,
),
),
),
const Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Text(
"전 세계",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
],
)
),
],
),
Container(
width: double.infinity,
height: 8,
color: Colors.white54,
),
// ** 목록 한줄 */
ListRow(chartData: chartData),
Container(
width: double.infinity,
height: 8,
color: Colors.white54,
),
ListRow(chartData: chartData),
Container(
width: double.infinity,
height: 8,
color: Colors.white54,
),
ListRow(chartData: chartData),
],
)
)
],
)
);
}
}
