Hero Animation

Hero Animation

 

[Ko]

 - Hero Animation 특징 : 2 x Hero widget (1st, 2md screen 각각에 Hero widget이 있어야 함.), Shared tag property, Navigator-based screen transition

 - Hero 적용 : navigator로 연결된 두 개 이상의 화면에서 양쪽 화면에 동일하게 존재하는 요소(image 등) widget을 Hero widget으로 감싸고, 양쪽 모두에 동일한 tag를 설정해주면 됨.

 

[En]

 - Hero Animation features: 2 x Hero widget (1st, 2md screen must have a Hero widget), Shared tag property, Navigator-based screen transition
 - Hero application: On two or more screens connected by navigator, you can wrap the widgets of elements (image, etc.) that are the same on both screens with the Hero widget, and set the same tag on both sides.

 

 - final code

1. welcome_screen.dart

Hero(

  tag: 'logo',

  child: Container(

    child: Image.asset('images/logo.png'),

    height: 60.0,

  ),

),

 

1. login_screen.dart

Hero(

  tag: 'logo',

  child: Container(

    height: 200.0,

    child: Image.asset('images/logo.png'),

  ),

),