Skip to content

Flutter hero #
Find similar titles

Hero Widget #

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

위젯 설명 #

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

tag

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

child

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

사용 예시 #

Text #

Text간의 Hero 애니매이션 적용

  • AppBartitle에 효과를 적용한 예시

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

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

    Screen A

    • AppBar의 속성인 centerTitletrue인 상태
  • 두 번째 화면,(화면 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),
            ),
          ),
        ),
      ),
    

    Screen B

    • AppBar의 속성인 centerTitlefalse인 상태
  • Hero 적용 결과

    A->B

    • 부드러운 화면 전환이 나타나는 것을 확인할 수 있다.
  • Hero 미적용 결과

    A->B

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

참고 #

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

Suggested Pages #

0.0.1_20140628_0