* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
플러터 1주차 과제인 영화리뷰앱을 구현하다가, 앱바와 텍스트필드는 제가 생각한대로 작성했고,
영화이미지뷰와 그 안에 텍스트는 정답 코드와 비교해서 구현했음에도, 오류가 발생합니다.
무엇이 문제일까요?
작성한 코드 및 에러 메세지
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(), // 홈페이지 보여주기
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// 음식 사진 데이터
List<Map<String, dynamic>> dataList = [
{
"category": "탑건: 매버릭",
"imgUrl": "https://i.ibb.co/sR32PN3/topgun.jpg",
},
{
"category": "마녀2",
"imgUrl": "https://i.ibb.co/CKMrv91/The-Witch.jpg",
},
{
"category": "범죄도시2",
"imgUrl": "https://i.ibb.co/2czdVdm/The-Outlaws.jpg",
},
{
"category": "헤어질 결심",
"imgUrl": "https://i.ibb.co/gM394CV/Decision-to-Leave.jpg",
},
{
"category": "브로커",
"imgUrl": "https://i.ibb.co/MSy1XNB/broker.jpg",
},
{
"category": "문폴",
"imgUrl": "https://i.ibb.co/4JYHHtc/Moonfall.jpg",
},
];
// 화면에 보이는 영역
return Scaffold(
appBar: AppBar(
centerTitle: false,
title: Text(
"Movie Reviews",
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold, fontSize: 25),
),
backgroundColor: Colors.white,
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.person_outline),
color: Colors.black,
)
],
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
hintText: '영화제목을 입력해주세요',
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black),
),
suffixIcon: IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
),
),
),
Divider(height: 1),
Expanded(
child: ListView.builder(
itemCount: dataList.length,
itemBuilder: (context, index) {
String category = dataList[index]['category'];
String imgurl = dataList[index]['imgurl'];
return Card(
child: Stack(
alignment: Alignment.center,
children: [
Image.network(
imgurl,
width: double.infinity,
height: 200,
fit: BoxFit.cover,
),
Container(
width: double.infinity,
height: 200,
color: Colors.black.withOpacity(0.5),
),
Text(
category,
style: TextStyle(
color: Colors.white,
fontSize: 36,
),
)
],
),
);
},
),
),
],
),
);
}
}
// Widget buildBackgroudCard() {
// final urlBackgroundImage = "https://i.ibb.co/sR32PN3/topgun.jpg";
// return Container(
// padding: EdgeInsets.only(top: 24),
// margin: EdgeInsets.only(top: 20),
// width: double.infinity,
// height: 200,
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(16),
// image: DecorationImage(
// image: NetworkImage(urlBackgroundImage),
// fit: BoxFit.cover,
// colorFilter: ColorFilter.mode(
// Colors.black.withOpacity(0.25),
// BlendMode.darken,
// )),
// ),
// child: Column(
// crossAxisAlignment: CrossAxisAlignment.stretch,
// children: [
// Container(
// child: Text(
// '탑건: 매버릭',
// style: TextStyle(
// fontSize: 30,
// fontWeight: FontWeight.bold,
// color: Colors.white,
// ),
// ),
// ),
// ],
// ),
// );
// }
// Widget buildBackgroudCard1() {
// final urlBackgroundImage = "https://i.ibb.co/CKMrv91/The-Witch.jpg";
// return Container(
// padding: EdgeInsets.only(top: 24),
// margin: EdgeInsets.only(top: 20),
// width: double.infinity,
// height: 200,
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(16),
// image: DecorationImage(
// image: NetworkImage(urlBackgroundImage),
// fit: BoxFit.cover,
// colorFilter: ColorFilter.mode(
// Colors.black.withOpacity(0.25),
// BlendMode.darken,
// )),
// ),
// child: Column(
// crossAxisAlignment: CrossAxisAlignment.stretch,
// children: [
// Container(
// child: Text(
// "마녀2",
// style: TextStyle(
// fontSize: 30,
// fontWeight: FontWeight.bold,
// color: Colors.white,
// ),
// ),
// ),
// ],
// ),
// );
// }
