Flutter _ Detail Screen

230603

 

---

오늘은 웹툰 이미지를 클릭하면

해당 웹툰의 상세페이지로

이동하는것을 해보겠다.

 

---

1. Detail Webtoon Screen

 

우선 widget 파일에

webtoon_widget.dart 파일을 생성한다.

 

그리고 Webtoon이라는 이름으로

StatelessWidget을 생성한다.

 

그리고 HomeScreen에 있는

웹툰의 썸네일과 제목이 있는 Column을 그대로

 

Webtoon의 build()의

return 값으로 전달한다.

 

그리고 가져온 코드에는

webtoon의 title, thumb, id가 필요하기에

위와 같이 선언해준다.

 

그리고 잘라내기한 Column대신에

Webtoon() 위젯을 위와 같이 선언해준다.

 

그리고 Webtoon 클래스의

Container로 돌아와

 

webtoon.title, webtoon.thumb 대신

title, thumb로 바꿔준다.

 

이제 웹툰 Card를 분리했으니

본격적으로 작업을 해보자.

 

---

1-1. Gesture Detector

 

우리는 웹툰의 썸네일을 클릭하거나 터치하면

해당 웹툰의 상세페이지로 이동시킬 계획이다.

 

이러한 이벤트(탭,클릭 등등)를 감지하기위해

Gesture Detector를 사용해보자.

 

우선 Webtoon 클래스로 돌아와서

Column을 widget으로 감싸고

 

감싸는 widget은 GestureDetector로 한다.

 

GestureDetector는

대부분의 동작을 감지하도록 도와준다.

 

위와 같이 많은 동작 감지가 있지만

우리는 onTap을 사용해 보도록 하자.

 

위와 같이 onTap 으로 함수를 선언하고

우리는 onTap이 실행되었을 경우 

 

필요한 이동할 페이지가 필요하므로생성해보도록 하자.

 

우선 디테일 페이지를 정의해줄

파일을 screens에 생성한다.

 

그리고 DetailScreen이라는

StatelessWidget을 생성한다.

 

그리고 위의 위젯도

webtoon의 title, thumb, id를 사용할테니

선언해주자.

 

결국 Screen의 모습을 보여줄 뿐이지

DetailScreen은 위젯이다.

 

그리고 이러한 위젯의 이동은

Navigator가 제공한다.

 

즉, 위젯과 위젯의 이동을

Navigator가 담당하는 것이다.

 

다시 Webtoon 클래스의

GestureDetector로 돌아와서

onTap()에 Navigator를 추가해주자.

 

---

1-2. Navigator.push & Route

 

Navigator.push는 약간의 애니메이션 효과와 함께

마치 페이지가 이동된것처럼 느끼게 해준다.

push를 살펴보면

push는 context, route가 필요하다.

 

route는 위의 사진과 같이

Route<T>라는 위젯을 의미하는데

 

Dart에서 제공하는 예시를 보면

MaterialPageRoute라는 route 위젯을 사용한다.

 

그리고 이러한 route 위젯은

builder를 통해 이동할 위젯을 선언한다.

 

우리는 DetailScreen으로

이동(push) 시켜야 하기에

위와 같이 선언해 주었다.

 

---

이제 결과를 테스트 해보기 전에

DetailScreen에 내용을 좀 추가해주자.

 

우선 가장 중요한 포인트는

Scaffold 부터 생성해야 한다는 것이다.

 

우리가 이동할 위젯은

HomeScreen에서 벗어나기에

아무것도 없을 것이다.

 

그러므로 다시 Scaffold()부터 만들고

내용을 추가해주자.

 

DetailScreen의 Scaffold에

HomeScreen의 AppBar를 그대로 잘라서 붙여넣고'오늘의 웹툰'이라는 Text 대신 title를 넣어주었다.

 

이제 웹툰의 썸네일을 클릭하면?

해당 웹툰 제목이 AppBar에 출력되는

위젯으로 이동한다.

 

이제 DetailScreen의

body를 만들어보자.

 

위와 같이 body를 선언하고

그안에 Column을 만들어 기준을 세운 다음

SizedBox를 생성해 주었다.

 

그리고 SizedBox 아래에

Container로 만든웹툰의 썸네일 코드를 복사 붙여넣기 하였다.

 

 

이제 DetailScreen에 

웹툰의 썸네일도 나온다.

 

이제 썸네일의 위치를 조정해보자.

 

Container를 Row로 감싸고

 

Row를중앙정렬하면?

 

위와 같이 깔끔해 졌다.