다음 코드는 코딩셰프의 수업을 바탕으로 작성하였습니다.
플러터(flutter) 강의: 순한 맛 시즌 2-3 | 리스트 뷰(List view)에서 데이터 전달하고 페이지 이동하기
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
like_button: ^2.0.4
# To add assets to your application, add an assets section, like this:
assets:
- image/
import 'package:flutter/material.dart';
import 'package:flutter_project_12/animal_page.dart';
import 'model.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyPage(),
);
}
}
class MyPage extends StatefulWidget {
const MyPage({Key? key}) : super(key: key);
@override
State<MyPage> createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
static List<String> animalImagePath = [
'image/bear.png',
'image/camel.png',
'image/deer.png',
'image/fox.png',
'image/kangaroo.png',
'image/koala.png',
'image/lion.png',
'image/tiger.png',
];
static List<String> animalName = [
'Bear',
'Camel',
'Deer',
'Fox',
'Kangaroo',
'Koala',
'Lion',
'Tiger',
];
static List<String> animalLocation = [
'forest and mountain',
'dessert',
'forest',
'snow mountain',
'Australia',
'Australia',
'Africa',
'Korea',
];
final List<Animal> animalData = List.generate(
animalLocation.length,
(index) => Animal(
animalName[index], animalLocation[index], animalImagePath[index]));
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('ListView'),
),
body: ListView.builder(
itemCount: animalData.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text(
animalData[index].name,
),
leading: SizedBox(
height: 50,
width: 50,
child: Image.asset(
animalData[index].imgPath,
),
),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => AnimalPage(animal: animalData[index],)));
debugPrint(animalData[index].name);
},
),
);
},
),
);
}
}
import 'package:flutter/material.dart';
import 'model.dart';
import 'package:like_button/like_button.dart';
class AnimalPage extends StatefulWidget {
const AnimalPage({Key? key, required this.animal}) : super(key: key);
final Animal animal;
@override
State<AnimalPage> createState() => _AnimalPageState();
}
class _AnimalPageState extends State<AnimalPage> {
bool isLiked = false;
int likeCount = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.animal.name),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 200,
width: 200,
child: Image.asset(widget.animal.imgPath),
),
const SizedBox(
height: 20,
),
Text(
'It lives in ' + widget.animal.location,
style: const TextStyle(
fontSize: 18,
),
),
const SizedBox(
height: 20,
),
LikeButton(
size: 30,
isLiked: isLiked,
likeCount: likeCount,
),
],
),
),
);
}
}
class Animal{
final String name; // 전달받은 데이터에 따라 각각 다른 동물이 생성될 것이기에 앱이 실행될 때 변하지 않는 상수로 만들기 위해서이다.
final String imgPath;
final String location;
Animal(this.name, this.location, this.imgPath);
}