커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
2주차 숙제 중 세 번째 페이지에서.. 이중 반복문 ㅜ
[왕초보] 플러터(Flutter)로 시작하는 앱개발 종합반 v0
2주차
김*지
댓글
10
・
추천
0
・
조회수
42
조회수
42
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
이중 반복문을 써야 하는 것이 맞지요..? 잘 안 됩니다 ㅜ
세 번째 페이지에서
아무래도 저 긴 stack이 세 번 들어가는 것은 아닌 것 같아서
이중? 반복문으로 처리하려고 하는데 아무 것도 안 보입니다
이중 반복문 사용하기 전
이중 반복문 시도 후
작성한 코드 및 에러 메세지
무엇이 잘못되었을까요..?
// 세번째 페이지
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 kr',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite kr',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite kr',
'artist': 'BTS',
},
],
'global': [
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite ww',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite ww',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite ww',
'artist': 'BTS',
},
],
'newyork': [
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite ny',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite ny',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite ny',
'artist': 'BTS',
},
],
};
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(40.0), // 원하는 높이 설정
child: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
title: SizedBox(
height: 40, // 앱바 경계 아래서부터의 거리.. 인 듯
child: Column(
children: [
Text(
'차트',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 0),
child: SingleChildScrollView(
child: Column(
children: [
Stack(
alignment: Alignment.center,
children: [
Container(
height: 200,
decoration: BoxDecoration(
color: Color(0xff4e1a92),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // 그림자 위치 조절
),
],
),
),
Column(
children: [
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4.0),
),
fixedSize: Size(350.0, 37.0),
),
child: Text(
"국가 및 도시별 차트",
style: TextStyle(
fontSize: 15,
color: Color(0xff4e1a92),
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 12),
Text(
"전 세계",
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 12),
],
),
],
),
SizedBox(height: 10),
// 왜 아무 것도 안 보이는 것인가...
ListView.builder(
itemCount: 3,
itemBuilder: (context, outerIndex) {
final chartType = ['korea', 'global', 'newyork'][outerIndex];
final chartTitle = ['대한민국 차트', '전세계 차트', '뉴욕 차트'][outerIndex];
final chartList = chartData[chartType]!;
return Stack(
children: [
Container(
height: 210,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // 그림자 위치 조절
),
],
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
Row(
children: [
Text(
chartTitle,
style: TextStyle(
color: Colors.grey,
fontSize: 17,
fontWeight: FontWeight.bold,
),
),
Spacer(),
Text(
"모두 보기",
style: TextStyle(
color: Colors.blue, fontSize: 15),
),
],
),
SizedBox(height: 12),
Row(
children: List.generate(
3,
(innerIndex) {
final data = chartList[innerIndex];
return Expanded(
child: Column(
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Image.network(
data['imageUrl']!,
width: 122,
),
Text(
data['name']!,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
Text(
data['artist']!,
style: TextStyle(
color: Colors.grey,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
);
},
),
),
],
),
),
],
);
},
)
],
),
),
),
);
}
}
이중 반복문 만들기 전 코드..
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Shazam',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 1,
length: 3,
child: Builder(builder: (context) {
DefaultTabController.of(context)?.addListener(() {
setState(() {});
});
return Scaffold(
body: Stack(
children: [
const TabBarView(
children: [
FirstTab(),
SecondTab(),
ThirdTab(),
],
),
SafeArea(
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
child: Column(
children: [
Container(
alignment: Alignment.topCenter,
child: TabPageSelector(
color: DefaultTabController.of(context)?.index == 1
? Colors.blue[300]
: Colors.grey[400],
selectedColor:
DefaultTabController.of(context)?.index == 1
? Colors.white
: Colors.blue,
indicatorSize: 8,
),
),
],
),
),
),
],
),
);
}),
);
}
}
// 첫번째 페이지
class FirstTab extends StatelessWidget {
const FirstTab({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const songs = [
{
'imageUrl': 'https://i.ytimg.com/vi/jAO0KXRdz_4/hqdefault.jpg',
'title': '가을밤에 든 생각',
'artist': '잔나비',
},
{
'imageUrl': 'https://i.ytimg.com/vi/jAO0KXRdz_4/hqdefault.jpg',
'title': '가을밤에 든 생각',
'artist': '잔나비',
},
{
'imageUrl': 'https://i.ytimg.com/vi/jAO0KXRdz_4/hqdefault.jpg',
'title': '가을밤에 든 생각',
'artist': '잔나비',
},
{
'imageUrl': 'https://i.ytimg.com/vi/jAO0KXRdz_4/hqdefault.jpg',
'title': '가을밤에 든 생각',
'artist': '잔나비',
},
{
'imageUrl': 'https://i.ytimg.com/vi/jAO0KXRdz_4/hqdefault.jpg',
'title': '가을밤에 든 생각',
'artist': '잔나비',
},
{
'imageUrl': 'https://i.ytimg.com/vi/jAO0KXRdz_4/hqdefault.jpg',
'title': '가을밤에 든 생각',
'artist': '잔나비',
},
];
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
leading: SizedBox(
child: Column(
children: [
Icon(
Icons.settings,
color: Colors.black,
size: 28,
),
],
),
),
title: SizedBox(
height: 60, // 위쪽 여백 조절
child: Column(
children: [
Text(
'라이브러리',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
children: [
GestureDetector(
onTap: () {
// Navigator를 이용하여 두 번째 페이지로 이동
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondTab()),
);
},
child: Row(
children: [
Image.network(
'https://i.ibb.co/hxNbZ8p/shazam.png',
width: 20,
color: Colors.black,
),
SizedBox(width: 10),
Center(
child: Text(
'Shazam',
style:
TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
),
],
),
),
SizedBox(height: 10),
Divider(
thickness: 1, // 구분선의 두께 조절
color: Color(0xffe5e5e5), // 구분선의 색상 조절
),
SizedBox(height: 10),
Row(
children: [
Icon(
Icons.person,
size: 24,
color: Colors.black,
),
SizedBox(width: 10),
Center(
child: Text(
'아티스트',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
)),
],
),
SizedBox(height: 10),
Divider(
thickness: 1, // 구분선의 두께 조절
color: Color(0xffe5e5e5), // 구분선의 색상 조절
),
SizedBox(height: 10),
Row(
children: [
Icon(
Icons.music_note,
size: 24,
color: Colors.black,
),
SizedBox(width: 10),
Center(
child: Text(
'회원님을 위한 재생목록',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
)),
],
),
SizedBox(height: 10),
Divider(
thickness: 1, // 구분선의 두께 조절
color: Color(0xffe5e5e5), // 구분선의 색상 조절
),
SizedBox(height: 10),
Row(
children: [
Center(
child: Text(
'최근 Shazam',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
)),
],
),
SizedBox(height: 15),
// 가로로 2장씩 배치되는 ListView.builder
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: songs.length ~/ 2, // 2개씩 묶어서 표시하므로 절반의 개수만큼만 표시
itemBuilder: (context, index) {
final startIndex = index * 2; // 현재 인덱스에 해당하는 첫 번째 항목의 인덱스
final song1 = songs[startIndex];
final song2 = startIndex + 1 < songs.length
? songs[startIndex + 1]
: null;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Row(
children: [
Expanded(
child: song1 != null
? buildSongCard(song1['imageUrl']!,
song1['title']!, song1['artist']!)
: Container(), // 데이터가 없을 경우 빈 컨테이너
),
SizedBox(width: 15),
Expanded(
child: song2 != null
? buildSongCard(song2['imageUrl']!,
song2['title']!, song2['artist']!)
: Container(), // 데이터가 없을 경우 빈 컨테이너
),
],
),
);
},
),
),
],
),
),
);
}
Widget buildSongCard(String imageUrl, String title, String artist) {
return ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Card(
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(8),
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
spreadRadius: 2,
blurRadius: 5,
offset: Offset(0, 3),
),
],
),
child: Column(
children: [
Image.network(
imageUrl,
fit: BoxFit.cover,
height: 165,
),
Container(
height: 130,
padding: EdgeInsets.all(10),
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
Text(
artist,
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
Spacer(),
Align(
alignment: Alignment.bottomLeft,
child: Image.network(
'https://i.ibb.co/KG9m5QS/applemusic.png',
width: 65,
),
),
],
),
),
],
),
),
),
);
}
}
// 두번째 페이지
class SecondTab extends StatelessWidget {
const SecondTab({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
leadingWidth: 100,
leading: Row(
children: [
SizedBox(width: 20), // 여백 추가
Column(
children: [
Icon(Icons.person, color: Colors.white),
Expanded(
// Expanded 추가
child: Text(
'라이브러리',
style: TextStyle(color: Colors.white),
),
),
],
),
],
),
actions: [
Row(
children: [
Column(
children: [
Icon(Icons.show_chart, color: Colors.white),
Text('차트', style: TextStyle(color: Colors.white)),
],
),
SizedBox(width: 20), // 여백 추가
],
),
],
),
extendBodyBehindAppBar: true,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xff80b7ef), Color(0xff2753a8)],
),
),
child: Center(
child: Container(
height: 530,
child: Column(
children: [
Text(
"Shazam하려면 탭하세요",
style: TextStyle(
color: Colors.white,
fontSize: 26,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 70),
Stack(
alignment: Alignment.center,
children: [
Container(
width: 220,
height: 220,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xff84bbf3),
),
),
Image.network(
'https://i.ibb.co/hxNbZ8p/shazam.png',
width: 140,
color: Colors.white,
),
],
),
SizedBox(height: 100),
SizedBox(
width: 55,
height: 55,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xff84bbf3),
),
child: Icon(
Icons.search,
color: Colors.white,
size: 35,
),
),
),
],
),
),
),
),
);
}
}
// 세번째 페이지
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 kr',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite kr',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite kr',
'artist': 'BTS',
},
],
'global': [
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite ww',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite ww',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite ww',
'artist': 'BTS',
},
],
'newyork': [
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite ny',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite ny',
'artist': 'BTS',
},
{
'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
'name': 'Dynamite ny',
'artist': 'BTS',
},
],
};
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(40.0), // 원하는 높이 설정
child: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
title: SizedBox(
height: 40, // 앱바 경계 아래서부터의 거리.. 인 듯
child: Column(
children: [
Text(
'차트',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 0),
child: SingleChildScrollView(
child: Column(
children: [
Stack(
alignment: Alignment.center,
children: [
Container(
height: 200,
decoration: BoxDecoration(
color: Color(0xff4e1a92),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // 그림자 위치 조절
),
],
),
),
Column(
children: [
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4.0),
),
fixedSize: Size(350.0, 37.0),
),
child: Text(
"국가 및 도시별 차트",
style: TextStyle(
fontSize: 15,
color: Color(0xff4e1a92),
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 12),
Text(
"전 세계",
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 12),
],
),
],
),
SizedBox(height: 10),
// 아 여기를 반복으로 묶어야 되는데.. ㅜㅜ
Stack(
children: [
Container(
height: 210,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // 그림자 위치 조절
),
],
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
Row(
children: [
Text("대한민국 차트",
style: TextStyle(
color: Colors.grey,
fontSize: 17,
fontWeight: FontWeight.bold)),
Spacer(),
Text(
"모두 보기",
style:
TextStyle(color: Colors.blue, fontSize: 15),
),
],
),
SizedBox(height: 12),
// b 클래스 내부 build 메서드 일부분
Row(
children: List.generate(
3,
(index) {
final data = chartData['korea']![index];
return Expanded(
child: Column(
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Image.network(
data['imageUrl']!,
width: 122,
),
Text(
data['name']!,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
Text(
data['artist']!,
style: TextStyle(
color: Colors.grey,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
);
},
),
),
],
),
),
],
),
SizedBox(height: 10),
Stack(
children: [
Container(
height: 210,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // 그림자 위치 조절
),
],
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
Row(
children: [
Text("전세계 차트",
style: TextStyle(
color: Colors.grey,
fontSize: 17,
fontWeight: FontWeight.bold)),
Spacer(),
Text(
"모두 보기",
style:
TextStyle(color: Colors.blue, fontSize: 15),
),
],
),
SizedBox(height: 12),
// b 클래스 내부 build 메서드 일부분
Row(
children: List.generate(
3,
(index) {
final data = chartData['global']![index];
return Expanded(
child: Column(
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Image.network(
data['imageUrl']!,
width: 122,
),
Text(
data['name']!,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
Text(
data['artist']!,
style: TextStyle(
color: Colors.grey,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
);
},
),
),
],
),
),
],
),
SizedBox(height: 10),
Stack(
children: [
Container(
height: 210,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // 그림자 위치 조절
),
],
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
Row(
children: [
Text("뉴욕 차트",
style: TextStyle(
color: Colors.grey,
fontSize: 17,
fontWeight: FontWeight.bold)),
Spacer(),
Text(
"모두 보기",
style:
TextStyle(color: Colors.blue, fontSize: 15),
),
],
),
SizedBox(height: 12),
// b 클래스 내부 build 메서드 일부분
Row(
children: List.generate(
3,
(index) {
final data = chartData['newyork']![index];
return Expanded(
child: Column(
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Image.network(
data['imageUrl']!,
width: 122,
),
Text(
data['name']!,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
Text(
data['artist']!,
style: TextStyle(
color: Colors.grey,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
);
},
),
),
],
),
),
],
),
],
),
),
),
);
}
}
댓글 알림
