Hero를 지원하지 않는 위젯에 Hero 효과 주기

[Flutter] Hero를 지원하지 않는 위젯에 Hero 효과 주기

Hero 위젯은 페이지 네비게이션 변경 시점에에 자연스럽게 위젯의 위치를 이동시킬때 사용합니다.

Hero 위젯을 사용하다보면 Hero 위젯을 사용할 수 없는 위젯이라는 오류를 만날 수 있습니다. 이번에는 이 경우에 Material 위젯을 이용해 Hero 효과를 적용하는 방법을 알아봅니다.

Master — Detail 구조의 앱에서 네비게이션 변경을 보기 위하여 두 페이지 위젯을 만들었습니다.

Master 페이지 위젯의 중앙에 있는 Text 위젯을 탭 하면 Detail페이지 상단의 위젯으로 자연스럽게 이동시키려면 Hero 위젯으로 두개 Text위젯을 감싸주어야합니다.

Master 페이지의 Text 위젯입니다.Hero(
 tag: 'HERO',
 Text('HELLO WORLD in Master Widget'),
)

Detail 페이지의 Text 위젯입니다.Hero(
 tag: 'HERO',
 child: Text('HELLO WORLD in Detail Widget'),
)

동일한 tag를 주어야 작동합니다. 같은 페이지에 여러 Hero 위젯을 만들 수 있으나 모든 tag가 달라야합니다.

만들어진 Hero 효과를 확인합니다.

중간에 빨간 경고 메시지가 있습니다. Hero 위젯은 Material 속성을 가진 위젯에만 적용을 할 수 있는데 Text 위젯은 Material 속성이 없는 위젯이기 때문입니다.

Material 위젯으로 Text 위젯에 속성을 추가합니다.// Master
Hero(
 tag: 'HERO',
 child: Material(
   type: MaterialType.transparency,
   child: Text('HELLO WORLD in Master Widget'),
 ),
)// Detail
Hero(
 tag: 'HERO',
 child: Material(
   type: MaterialType.transparency,
   child: Text('HELLO WORLD in Detail Widget'),
 ),
)

Material 위젯으로 감싼 후 type을 추가했습니다.

완성된 결과입니다.

빨간 글씨로 나오는 경고가 사라진것을 확인할 수 있습니다.

시리즈의 전체목록을 보려면 링크를 눌러주세요