[Flutter] Hero 위젯에 대하여

Hero란?

Flutter에서 화면 전환 시 부드러운 애니메이션을 제공하는 위젯으로,
같은 tag를 가진 위젯 간에 애니메이션 효과를 적용하여 자연스러운 전환을 가능하게 한다.

사용 방법

적용을 시작점 스크린과 도착점 스크린간의 위젯을 모두 Hero로 선언하고, 이어서 같은 tag를 사용한다.

// 시작 스크린
  child: Column(
        children: [
          Hero(
            tag: id,
            child: Container(
              width: 300,
              clipBehavior: Clip.hardEdge,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
                boxShadow: [
                  BoxShadow(
                    blurRadius: 10,
                    offset: const Offset(10, 10),
                    color: Colors.white.withOpacity(0.2),
                  ),
                ],
              ),
              child: Image.network(thumb, headers: const {
                'User-Agent':
                    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36',
              }),
            ),
          ),
        ],
      ),
    

• Hero의 tag를 id로 지정
• child: Container(...)와 같이 Container를 감싸서 Hero 애니메이션 위젯 적용
• Image.network(thumb, headers: {...})은 Hero 애니메이션을 적용할 대상을 의미

아 그리고 tag로 사용되는 id 속성은 시작 스크린에서 Navigator.push를 사용하여 도착 스크린으로 넘겨준 후 사용했습니다!

// 도착 스크린
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Hero(
      tag: id,
      child: Container(
        width: 300,
        clipBehavior: Clip.hardEdge,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          boxShadow: [
            BoxShadow(
              blurRadius: 10, // 그림자의 거리 설정
              offset: const Offset(10, 10), // 그림자의 위치
              color: Colors.white.withOpacity(0.2),
            ),
          ],
        ),
        child: Image.network(thumb, headers: const {
          'User-Agent':
              'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36',
        }),
      ),
    ),
  ],
),

결과

간편한 사용법 대비 퀄리티를 확실히 올려주는 듯하다.

정리

Hero는 Flutter에서 자연스러운 화면 전환 애니메이션을 아주 손쉽게 만들 수 있는 멋진 녀석이다! 😆