★ 웹툰 만들기 - Hero

1. 애니메이션 기능 미쳤다.

플러터는 애니메이션이나 앱에 진짜 특화된 것 같다. 

 

이전에는 같은 컨테이너 (같은 이미지)가 네비게이션을 통해 다른 화면으로 이동했을 때, 다시 새롭게 나오는 형식인데

Hero 위젯을 사용하게 되면 동일 컨테이너(이미지)가 애니메이션 효과로 자연스럽게 다른화면으로 이동되는 모습으로 보인다.

 

(개인적으로 앞으로의 기술시장에서는 지금도 그렇지만, 디자인의 영향력이 점차 커질 것 같다.)

 

-webtoon_widget.dart

webtoon위젯의 컨테이너 (이미지 부분)에 Hero 위젯으로 감싸주고 tag를 넣어준다. 이때 id는 home screen에서 받아온 id값이고 Navigator를 통해 Detail screen에 id 값을 다시 넘겨준다.

      child: Column(

        children: [

          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.3),

                    )

                  ]),

              child: Image.network(

                thumb,

              ),

            ),

- detail_screen.dart

똑같이 컨테이너 (이미지) 부분에 Hero 위젯으로 감싸주었고 tag에 받아온 id를 넣어준다.

    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.3),

                        )

                      ]),

                  child: Image.network(

                    thumb,

                  ),

                ),