* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
선생님 숙제해설이랑 똑같이 했는데 저는 밑부분이 잘려요
이거 어떻게 해결 하나요??
.png)
작성한 코드 및 에러 메세지
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: [
TabBarView(
children: [
FirstTab(),
SecondTab(),
ThirdTab(),
],
),
SafeArea(
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
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 Center(child: Text('첫번째 페이지'));
}
}
// 두번째 페이지
class SecondTab extends StatelessWidget {
const SecondTab({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.blue[300]!,
Colors.blue[900]!,
],
),
),
child: SafeArea(
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 8.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
DefaultTabController.of(context)!.animateTo(0);
},
child: Column(
children: [
Icon(
Icons.person,
color: Colors.white,
),
Text(
"라이브러리",
style: TextStyle(color: Colors.white),
),
],
),
),
GestureDetector(
onTap: () {
DefaultTabController.of(context)!.animateTo(2);
},
child: Column(
children: [
Icon(
Icons.show_chart,
color: Colors.white,
),
Text(
"차트",
style: TextStyle(color: Colors.white),
),
],
),
),
],
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.1,
),
Text(
"shazam하려면 탭 하세요",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(height: 50),
Container(
alignment: Alignment.center,
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.blue[300],
shape: BoxShape.circle,
),
child: Image.network(
"https://i.ibb.co/hxNbZ8p/shazam.png",
color: Colors.white,
height: 130,
width: 130,
),
),
SizedBox(height: 90),
Container(
alignment: Alignment.center,
height: 60,
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue[300],
),
child: Icon(
Icons.search,
color: Colors.white,
size: 40,
),
),
],
),
),
);
}
}
// 세번째 페이지
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(children: [
AppBar(
backgroundColor: Colors.white,
title: Text(
"차트",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
Container(
alignment: Alignment.center,
height: 200,
decoration: BoxDecoration(
color: Colors.purple[900],
),
child: Column(
children: [
SizedBox(height: 70),
Container(
width: 350,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7),
color: Colors.white,
),
child: Text(
"국가 및 도시별 차트",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.purple[900],
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
child: Text(
"전 세계",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
)
],
),
),
Container(
height: 8,
color: Colors.grey,
),
Container(
// height: 150,
// decoration: BoxDecoration(color: Colors.red),
child: Column(
children: [
Row(
children: [
Text(
"대한민국 차트",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
textAlign: TextAlign.left,
),
Spacer(),
Text(
"모두보기",
style: TextStyle(
color: Colors.blue,
fontSize: 17,
),
),
],
),
Row(
children: chartData['korea']!.map((element) {
String imageUrl = element['imageUrl']!;
String name = element['name']!;
String artist = element['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: TextStyle(
fontWeight: FontWeight.bold,
),
),
Text(
artist,
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
);
}).toList(),
),
Container(
height: 8,
color: Colors.grey,
),
Container(
// height: 150,
// decoration: BoxDecoration(color: Colors.red),
child: Column(
children: [
Row(
children: [
Text(
"대한민국 차트",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
textAlign: TextAlign.left,
),
Spacer(),
Text(
"모두보기",
style: TextStyle(
color: Colors.blue,
fontSize: 17,
),
),
],
),
Row(
children: chartData['korea']!.map((element) {
String imageUrl = element['imageUrl']!;
String name = element['name']!;
String artist = element['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: TextStyle(
fontWeight: FontWeight.bold,
),
),
Text(
artist,
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
);
}).toList(),
)
],
),
),
],
),
),
]),
);
}
}
