순한맛 시즌 2-3 리스트뷰(ListView)에서 데이터 전달하고 페이지 이동하기
리스트뷰에서 각 아이템을 터치하면 현재의 데이터를 다른 페이지로 전달하면서
해당 페이지로 이동하는 기능을 구현해 보자.
좋아요 버튼은 서버와 연결 돼서 데이터를 저장하는 기능이 포함 되어야 하므로
이번 시간에는 간단히 화면에 배치하는 정도로만 구현함.
여기까지 짜고 이제 데이터 모델과 데이터를 만들어 보자.
애니멀 클래스에 세 가지 속성을 부여함.
리스트 생성 후 Animal 클래스를 만들어 줌.
여기서 List.generate 라는 것을 처음 썼다.
이제 animalData변수가 준비되었으니 리스트뷰를 만들어 보자.
이미지를 못 불러와서 헤맸는데
여기서 51번줄 52번줄 자리 바꾸니까 됨.
근데 강사는 그 전처럼 써도 잘 되던데.
이게 해결 방법이 맞나? 모르겠따ㅠ
이제 새로운 파일을 만들어주자
lib 폴더에 animail_pate.dart 파일 만들어줌.
이 페이지에는
AppBar => 동물이름
body => 큰 동물 이미지
=> 동물 서식지
가 출력되는 구조로 만들어보겠따.
우선 이정도 모양을 갖춰 놓고 다시 main.dart 파일로 ㄱㄱ
onTap 메서드 내에서 페이지 이동을 구현해 보자.
사용자가 리스트를 터치 하면 AnimalPage 위젯 페이지로 데이터를 전달해주어야 함
이를 위해서 AnimalPage 위젯 생성자에서 데이터를 전달 받게 해주어야 함.
그러자면 model.dart 파일에 Animal 클래스 타입이 필요하므로
animal_page.dart 파일에서 Animal 타입의 animal이라는 속성을 하나 만들고
model.dart 파일을 import 해줌.
이제 생성자에도 추가해 준다.
빨간 밑줄이 생기는 이유는 이 animal 변수는 널값을 가질 수 없기 때문.
그래서 앞에 required 키워드를 붙여줌.
이제 main.dart 파일로 가서
생성자를 만들어 주었으니 AnimalPage위젯에서 animal알규먼트를 불러오고
animalData를 전달해줌.
그리고 사용자에 의해 터치 되는 리스트 아이템에 대한 번호도 필요하므로 index도 전달.
이제 페이지 이동 시 데이터들이 저기 75번줄 animal로 전달될 테니
AnimalPage 위젯 내에서 저 7번줄 animal을 사용해서 화면에 필요한 데이터들을 출력할 수 있을 것임.
아까 비워 놓은 appBar의 animal.name
body의 animal.imgPath, animal.location 을 채워줌
여기서 H를 클릭 하면
요케 잘 뜸.
이제 이미지 크기와
밑에 글자 크기랑 등등 수정 해주자.
이제 좋아요 버튼을 눌러주자.
pub.dev 홈페이지에서 가져옴.
이 과정은 강의 18분 쯤에 있으니 필요하면 참고하길
이제 위에서 두개의 변수를 생성
그 전에 좋아요를 누르면 좋아요의 숫자가 바뀌게 됨.
즉 state가 변하게 되므로
AnimalPage 위젯을 stateful위젯으로 바꿔줘야 함.
(이때, 글자만 바꾸는 게 아니라 convert to stateful widget을 눌러줘야 오류 안 생김)
여까지 뜸.
좋아요 클릭하면
요렇게 뜨고 한 번 더 클릭 하면 취소됨
'코딩쉐프 강의 복습' 카테고리의 다른 글
| 온보딩 스크린, 리스트뷰 빌더와 다이어로그 팝업창 (1) | 2025.06.19 |
|---|---|
| Snack bar, Toast message, Container, Column, Row, pushNamed method, Collection&Generic, 패치강좌(snack bar, ScaffoldMessenger, 버튼디자인활용하기) (3) | 2025.06.18 |
| Class vs Widget, app bar메뉴,Drawer, BuildContext, Snack bar (2) | 2025.06.17 |
| 캐릭터 페이지 디자인 하기 (4) | 2025.06.16 |