[Flutter] Hero Widget에 대해 알아보자!

Flutter Hero 위젯 사용하기

Hero 위젯은 Flutter 앱에서 페이지 간 전환 애니메이션을 쉽게 구현할 수 있는 강력한 도구입니다. 이를 사용하면 두 개의 위젯 사이에서 부드러운 전환 효과를 만들 수 있습니다.

1. Hero 위젯 기본 개념

Hero 위젯은 두 개의 다른 화면 사이에서 위젯을 공유하고 전환 애니메이션을 적용하는 데 사용됩니다. 예를 들어, 첫 번째 화면에서 이미지를 탭하면 다음 화면으로 전환되면서 해당 이미지가 확대되는 애니메이션을 구현할 수 있습니다.

2. Hero 위젯을 사용하여 애니메이션 구현하기

다음은 Hero 위젯을 사용하여 애니메이션을 구현하는 간단한 단계입니다.

단계 1: Hero 위젯을 사용할 위젯 준비하기

첫 번째 화면에서 Hero 위젯을 사용할 위젯을 준비합니다. 예를 들어, 이미지 위젯을 준비합니다.

Hero(
  tag: 'imageTag',
  child: Image.asset('assets/image.png'),
)

 

단계 2: 다음 화면으로 전환하기

위젯을 탭하면 다음 화면으로 전환하도록 코드를 작성합니다. 이 때, Hero 위젯을 사용할 위젯과 동일한 태그를 가진 위젯을 다음 화면에 배치합니다.

Hero(
  tag: 'imageTag',
  child: Image.asset('assets/image.png'),
)

단계 3: Hero 위젯이 적용된 전환 애니메이션 확인하기

이제 위의 두 개의 화면 사이를 전환하면 Hero 위젯이 애니메이션을 자동으로 처리합니다. 위젯의 위치 및 크기 변화를 알아서 다루며 부드러운 전환 효과를 제공합니다.

3. 주의사항

• Hero 위젯을 사용할 때, 태그(tag) 값은 두 개의 화면에서 동일해야 합니다.
• 이미지나 컨텐츠의 크기가 다를 경우, 애니메이션이 어색하게 나올 수 있으므로 크기를 조절하는 것이 중요합니다.

이제 Flutter 앱에서 Hero 위젯을 사용하여 부드러운 전환 애니메이션을 만들 수 있습니다. 이것은 사용자 경험을 향상시키고 앱을 더욱 흥미롭게 만들어줍니다.

이상으로 Hero 위젯을 사용하는 방법에 대한 간단한 소개를 마치겠습니다. 더 자세한 내용은 Flutter 공식 문서를 참조하세요.

Happy coding! 😊