Flutter _ Hero Widget

230604

 

---

 

지난 포스팅에서

우리는 Navigator를 이용하여

위젯간의 이동을 만들어

 

마치 또 다른 화면이 나오게끔

만들었다.

 

하지만 이러한 화면의 전환 말고도

Flutter에는 Hero라는 위젯을 통해

애니메이션 효과를 주어

마치 화면이 전환 된것처럼 보이게 할 수 있다.

 

---

1. Hero 

 

현재 우리는 썸네일을 클릭하면

DetailScreen 위젯으로 넘어가는데

 

이번에는 Hero 위젯을 사용하여

클릭했을때 썸네일이 확장되어

 

화면이 이동된것처럼

만들어보자.

 

webtoon_widget 파일에서

 

우선 우리의 주 목표

웹툰의 썸네일을 가지고있는 

Container를 Hero 위젯으로 감싼다.

 

 

감싸는 Hero 위젯은

위의 사진과 같이 

tag과 child라는 인자를

필수로 필요로한다.

 

여기서 tag란 

Hero의 핵심 요소로

각 위젯과 위젯 연결의 연결고리 역할을 한다.

 

실제 웹에서는 id가 가장 유사하다.

 

우리는 API에서 웹툰의 id도 받았는데

이를 여기에 사용해보자.

 

자 이제 Webtoon 클래스의

썸네일부분의 Container는

id라는 tag가 붙었다.

 

DetailScreen 클래스쪽으로 넘어가자.

 

 

DetailScreen에 있는Container도Hero 위젯으로 감싸고tag를 id로 지정해 주면

 

위와 같이 애니메이션 효과가 적용되었다.