[flutter]Hero 애니메이션

https://medium.com/@ai-den/flutter-hero%EB%A1%9C-%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94-%EC%9E%90%EC%97%B0%EC%8A%A4%EB%9F%AC%EC%9A%B4-%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98-a37a76f9cbe8

[Flutter] Hero로 구현하는 자연스러운 네비게이션

Hero에 장점에 대해 잘 작성 된 글이있어 요약해봤다

---

Flutter로 구현하는 자연스러운 네비게이션 - Hero 애니메이션

• Flutter는 프레임 드랍 없는 부드러운 애니메이션 구현이 가능.
• 그중 Hero 위젯이 가장 뛰어난 전환 효과 제공 (Medium).

---

Hero의 기본 사용

• 출발 화면과 도착 화면에서 동일한 tag를 가진 Hero 위젯으로 감싸면, Flutter가 자동으로 출발지 → 목적지로 자연스럽게 비행(fly) 하는 애니메이션을 구현한다 (Medium).
• 예제:
  • DescribeFlutter 화면: FlutterLogo(size:100) 터치 시 네비게이트.
  • FullsizedFlutterLogo 화면: 화면 전체 크기의 로고 표시, 탭 시 이전 화면으로 pop() (Medium).
  • 두 화면 모두 같은 Hero(tag: ...)로 감싸면 자동 애니메이션.

---

사용 이유 및 장점

• 시각적 연속성 제공: 사용자가 요소의 이동을 따라가며 자연스럽게 흐름을 인지.
• 코드로 구현 간결: 복잡한 애니메이션 없이 Hero와 tag만으로 충분.

---

실무 팁

• Hero 애니메이션은 간단하지만 반복 태그, 복잡 위젯 구조, 리스트 내부 적용 시 문제가 발생할 수 있으므로 태그 관리와 구조 단순화에 주의해야 함.
• 성능 고려: 애니메이션 대상 위젯은 가볍게 유지. 큰 위젯이나 복잡 구조는 피하는 것이 안정적임 (Medium 글은 이 부분 상세 설명은 없지만 일반적인 주의사항임).

---

 

Hero 애니메이션은 Flutter에서 자연스럽고 직관적인 화면 전환을 구현하는 핵심다. 최소한의 코드로 높은 시각적 효과를 구현 가능하므로, 화면 간 공유 UI 요소 전환이 필요한 상황에서 적극 고려할 가치가 있다.