[웹툰 앱 만들기] Hero

flutter에서 Hero라는 위젯을 이용해서 다음 영상처럼 특정 요소가 연결되는 것처럼 보이게 만들 수 있다.

 

방법은 다음과 같다.

Hero(
            tag: id,
            child: Container(
              clipBehavior: Clip.hardEdge,
              width: 260,
              // ...
              child: Image.network(
                thumb,
              ),
            ),
          ),

여러 웹툰이 나와 있는 화면의 특정 웹툰 포스터에 해당하는 위젯을 Hero 위젯으로 감싼다. Hero 위젯의 경우 tag가 필수이기 때문에 json으로 전달받은 정보 중 하나인 id로 설정해준다.

 

Hero(
                tag: id,
                child: Container(
                  clipBehavior: Clip.hardEdge,
                  // ...
                  child: Image.network(
                    thumb,
                  ),
                ),

그리고 detail screen에서 띄우는 특정 웹툰의 포스터에 해당하는 위젯을 Hero 위젯으로 감싼다. 마찬가지로 tag를 설정해야 하는데, 위 위젯과 연결되게 같은 값으로 설정하면 된다. detail screen의 경우도 인자로 해당 웹툰의 id를 사용할 수 있기에 똑같이 설정해준다. 그러면 위 동영상처럼 효과를 나타낼 수 있다.

https://github.com/soaringwave/Flutter-studying/commit/4aca16a2adbe5ec9d18e4998a7d41f93a6dfefcf

 

---

+ 다른 시도

 

한 포스터의 크기를 조정한 경우

포스터가 아닌 제목까지 포함하는 Column에 Hero를 적용할 경우 작동은 하지만 에러가 뜬다.

---

https://docs.flutter.dev/ui/animations/hero-animations

Hero animations

https://nomadcoders.co/flutter-for-beginners/lectures/4169

All Courses – 노마드 코더 Nomad Coders