9. [Flutter] 화면 전환 애니메이션 주기 (with Hero 위젯)

Flutter에서 제공하는 Hero 위젯을 사용하면  화면전환 애니메이션을 쉽게 넣을 수 있습니다.

 

사용방법.

전환 이벤트를 가지고 있는 Widget과 전환된 화면에 나타나는 Widget의 부모 Widget으로 Hero()를 작성합니다.

Hero() 의 tag: 속성에 두 화면이 서로 공유하는 유일한 고유 값을 설정합니다.

 

page_dump.dart (다음 화면으로 값을 넘기는 Widget(화면))

  return GestureDetector(

                onTap: () {

                  listItemTap(context, dumpl);

                },

                child: Hero(

                  tag: dumpl.title,

                  child: Container(

                    padding: const EdgeInsets.symmetric(

                        horizontal: 80, vertical: 80),

                    decoration: BoxDecoration(

                        color: Colors.amber.shade800,

                        borderRadius:

                            const BorderRadius.all(Radius.circular(20))),

 

 

page_dump_chord.dart (값을 받아서 화면을 생성하는 Widget(화면))

 return Scaffold(

      body: Center(

        heightFactor: 20,

        child: Padding(

          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 230),

          child: Hero(

            tag: title,

            child: Container(

              decoration: const BoxDecoration(

                  color: Colors.blueGrey,

                  borderRadius: BorderRadius.all(Radius.elliptical(20, 20))),

              padding: const EdgeInsets.symmetric(horizontal: 80, vertical: 80),

              child: Column(

                children: [

객체값을 값을 표현하는 Container() Widget 의 부모로 Hero Widget을 작성합니다.

 

또한, 두 Widget은 tile이라는 객체속성을 공유하며, 이 값은 고유한 값입니다.

 

title을 Hero() 의 tag: 속성에 지정하면 끝 입니다.

 

 

※Hero 위젯을 적용하더라도 모션이 부자연스럽다면 아래 사항들을 확인하시면됩니다.

1. Hero 위젯에 설정된 tag 값이 다릅니다.
: tag 값은 전환되는 두 위젯에서 동일한 값을 가져야 합니다. 값이 다르면 Hero 위젯이 수행되지않습니다.

2. 전환되는 두 위젯의 크기와 위치가 다릅니다.
: Hero 위젯은 전환되는 두 위젯의 크기와 위치가 서로 일치하지않으면, 애니메이션이 부자연스러울 수 있습니다.

3. 디바이스 성능이 낮습니다.
: 일부 디바이스에서는 전환 애니메이션이 부드럽지 않을 수 있습니다. 

---

빌드된 모습.

---

*위와 같이 페이지가 전환될 때, 텍스트가 깨진다면 아래와 같이 해주세요.

 

*해결방법

Hero 하위 위젯을 Material 위젯으로 감싸고, type: 속성에 MaterialType.transparency 을 입력합니다.

child: Hero(
        tag: color,
        child: Material(
          type: MaterialType.transparency,
          child: ...