✨ Flutter 위젯 시리즈: Hero 애니메이션과 전환 효과 완전 정복

Flutter에서 두 화면 간 자연스러운 전환 효과를 만들고 싶다면 Hero 애니메이션을 꼭 알아야 합니다.
이미지 확대, 썸네일 → 상세 화면 전환 등 다양한 UI에서 활용됩니다.

---

✅ 1. Hero 위젯이란?

Hero 위젯은 화면 간 이동 시 동일한 요소를 자연스럽게 크기/위치/스타일로 전환해줍니다.
동일한 tag 속성을 가진 Hero끼리 연결됩니다.

---

✅ 2. 기본 사용 예제

// 첫 번째 화면
GestureDetector(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => DetailPage()),
    );
  },
  child: Hero(
    tag: 'hero-image',
    child: Image.network(
      'https://via.placeholder.com/150',
      width: 150,
    ),
  ),
)

// 두 번째 화면
Hero(
  tag: 'hero-image',
  child: Image.network(
    'https://via.placeholder.com/600',
    width: double.infinity,
    fit: BoxFit.cover,
  ),
)

✔️ tag 값이 같으면 Hero가 연결됩니다.

---

✅ 3. 어떻게 동작할까?

• 첫 화면의 Hero → 두 번째 화면의 Hero로 자연스럽게 애니메이션.
• 이미지/텍스트/아이콘 등 다양한 위젯에 적용 가능.
• Navigator가 Hero 위젯의 위치와 크기를 계산해서 전환 애니메이션을 처리.

---

✅ 4. Hero 애니메이션 커스터마이징

Hero는 flightShuttleBuilder 속성을 통해 전환 중 위젯을 커스터마이징할 수 있습니다.

Hero(
  tag: 'profile',
  flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) {
    return Icon(Icons.star, size: 100, color: Colors.yellow);
  },
  child: CircleAvatar(
    radius: 40,
    backgroundImage: NetworkImage('https://via.placeholder.com/150'),
  ),
)

✔️ 전환 중 아이콘 모양으로 대체!

---

✅ 5. Hero 애니메이션 실전 사용 예

• 갤러리 썸네일 → 이미지 전체 화면
• 프로필 목록 → 상세 프로필
• 카드 리스트 → 카드 상세 페이지

✔️ UX가 확 달라지는 깔끔한 전환 효과 구현!

---

📌 다음 편 예고

• 👉 위젯 시리즈: Flutter PageView & Carousel Slider 구현하기