이미지와 제목을 가진 영화리스트를 작성해야 합니다. 리스트가 많을 경우, 별도의 파일로 작성하여 불러오는 방법도 있습니다. 이번에는 몇개 안되므로 직접 넣어 추가해보겠습니다.
List 추가
1. 리스트 데이터 만들기
리스트를 만드는 코드입니다.
List<Map<String, dynamic>> 리스트명 = [
// 리스트 내용 //
];리스트 양이 많지 않기 때문에 직접 코드안에 넣도록 하겠습니다.
Widget build(BuildContext context) {
코드아래에 위치합니다.
@override
Widget build(BuildContext context) {
List<Map<String, dynamic>> movieData = [
// 제목, 배경이미지 리스트 //
{"movieTitle": "탑건: 매버릭", "imgUrl": "https://i.ibb.co/sR32PN3/topgun.jpg"},
{"movieTitle": "마녀2", "imgUrl": "https://i.ibb.co/CKMrv91/The-Witch.jpg"},
{"movieTitle": "범죄도시2", "imgUrl": "https://i.ibb.co/2czdVdm/The-Outlaws.jpg"},
{"movieTitle": "헤어질 결심", "imgUrl": "https://i.ibb.co/gM394CV/Decision-to-Leave.jpg"},
{"movieTitle": "브로커", "imgUrl": "https://i.ibb.co/MSy1XNB/broker.jpg"},
{mMovieTitle": "문폴", "imgUrl": "https://i.ibb.co/4JYHHtc/Moonfall.jpg"},
];
return Scaffold(
appBar: AppBar(
title: Text(
2. body에 Column 위쳇 추가
TextField 하나였다가 아래에 영화리스트가 보여져야 합니다. 세로로 나열하기 위해서는 Column 위젯을 추가해야 합니다.
body: Container 에서 body: Column 위젯을 추가합니다.
body: Column(
children: [
Container(
margin: const EdgeInsets.all(10),
child: TextField(
decoration: InputDecoration(
labelText: '영화 제목을 검색해주세요.',
border: const OutlineInputBorder(),
suffixIcon: const Icon(Icons.search),
),
),
), //Container
//리스트뷰가 들어갈 자리
), //Column
body의 Column에 TextField의 Container와 ListView를 포함시킵니다.
4. Expanded 위젯추가
ListView.builder를 감싸서 화면의 나머지 부분을 차지하도록 하기 위해 Expanded 위젯을 사용합니다.
Expanded(
child: ListView.builder()
),
5. ListView.builder 추가
ListView.builder는 두개의 함수를 가지고 갑니다.
itemCount : 몇개의 리스트를 가져갈 것인가?
itemBuilder: (context, index) : index번째에 해당하는 항목에 그려질 View를 반환하는 함수입니다. index는 0부터 시작합니다.
Expanded(
child: ListView.builder(
itemCount: movieData.length,
itemBuilder: (context, index) {
String movieTitle = movieData[index]['movieTitle'];
String imgUrl = movieData[index]['imgUrl'];
}
),
),
여러 위젯을 추가했지만, 화면에 보여지는 것은 없습니다.
보여지기 위한 위젯은 설명이 길어 다음 포스팅으로 이어집니다.