Hero Widget #

Hero Widget은 플러터에서 지원하는 강력한 기본 애니메이션 위젯이다. 한 화면에서 다른 화면으로 넘어갈 때 발생하는 애니메이션으로, 두 화면을 시각적으로 연결해준다.

위젯 설명 #

두 화면 간에 애니매이션을 지정해 줄 위젯child을 각각 Hero Widget으로 감싼다. 이 때, 위젯의 구분은 tag로 한다.

tag

• Hero Widget을 식별하기 위한 객체로 양쪽 모두 동일한 값을 가져야 함

child

• 화면 전환 시 애니메이션 효과를 적용할 위젯

사용 예시 #

Text #

Text간의 Hero 애니매이션 적용

• AppBar의 title에 효과를 적용한 예시

• 첫 번째 화면,(화면 A)

  appBar: AppBar(
      title: Hero(
        tag: 'appbar',
        child: Material(
          color: Colors.transparent,
          child: Text(
            'D.iF Hero',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        ),
      ),
    ),
  

  

  • AppBar의 속성인 centerTitle이 true인 상태

• 두 번째 화면,(화면 B)

  appBar: AppBar(
      centerTitle: false,
      title: Hero(
        tag: 'appbar',
        child: Material(
          color: Colors.transparent,
          child: Text(
            'D.iF Hero',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        ),
      ),
    ),
  

  

  • AppBar의 속성인 centerTitle이 false인 상태

• Hero 적용 결과

  

  • 부드러운 화면 전환이 나타나는 것을 확인할 수 있다.

• Hero 미적용 결과

  

  • 부자연스러운 화면 전환이 나타나는 것을 확인할 수 있다.

참고 #

[출처] YouTube, Hero (Flutter Widget of the Week)

Suggested Pages #

• 0.025 Android
• 0.025 iOS
• More suggestions...