Flutter - 6.10 Hero

6.9에서 했던 것들을 Hero widget을 사용하면 아주 재미있는 것들을 많이 구현할 수 있다고 한다.

이번에는 썸네일이 새로 로드되는 것이 아닌, 기존 썸네일이 이동해서 동일한 썸네일임을 명확히 할 수 있도록 하려고 한다.

사용법

1. Hero widget을 두 개의 화면에 각각 사용
2. 각각의 위젯에 같은 태그를 주기

끝이다. 너무 쉬운데, 사실 이를 Hero없이 구현하려면 막막한데...

썸네일만 가져올 것이기 때문에, 썸네일을 담고 있는 'Container'를 Hero widget으로 감싸면 된다.
다음과 같이 말이다.

webtoon_widget.dart

          Hero(
            tag: id,
            child: Container(
              width: 250,
              clipBehavior: Clip.hardEdge,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
                boxShadow: [
                  BoxShadow(
                    blurRadius: 15,
                    offset: const Offset(10, 10),
                    color: Colors.black.withOpacity(0.5),
                  )
                ],
              ),
              child: Image.network(thumb),
            ),
          ),

detail_screen.dart

              Hero(
                tag: id,
                child: Container(
                  width: 250,
                  clipBehavior: Clip.hardEdge,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15),
                    boxShadow: [
                      BoxShadow(
                        blurRadius: 15,
                        offset: const Offset(10, 10),
                        color: Colors.black.withOpacity(0.5),
                      )
                    ],
                  ),
                  child: Image.network(thumb),
                ),
              ),

이렇게 단순하게 Hero widget으로 Container widget을 감싸고, 동일한 tag를 준다.(그래서 미리 detail_screen.dart으로 웹툰의 id도 같이 보낸 모양이다.)

와우