Flutter Hero 위젯으로 매끄러운 화면 전환 애니메이션 구현하기

728x90

들어가기 전에

Flutter의 Hero 위젯은 화면 전환 시 자연스럽고 매끄러운 애니메이션을 제공하는 도구로 매우 자주 사용됩니다. 이 위젯은 두 화면 간의 동일한 위젯을 연결하여 사용자가 화면을 전환할 때 시각적으로 이어지는 효과를 만듭니다. 예를 들어, 리스트에서 이미지를 클릭하면, 해당 이미지가 확대되어 다음 화면에서 이어지는 애니메이션을 Hero 위젯을 통해 쉽게 구현할 수 있습니다.

이번 포스트에서는 Flutter의 Hero 위젯을 사용해 화면 전환 애니메이션을 구현하는 방법을 살펴보고, 다양한 예제를 통해 Hero 위젯을 활용하는 팁을 공유하겠습니다.

Hero 위젯이란?

Hero 위젯은 Flutter의 애니메이션 위젯 중 하나로, 두 화면 간 동일한 위젯을 연결하여 화면 전환 시 부드러운 애니메이션 효과를 제공합니다. 'Hero'라는 이름은 영화 속의 히어로처럼 한 화면에서 다른 화면으로 '날아가는' 애니메이션 효과에서 유래했습니다. Hero 위젯은 특히 이미지, 텍스트, 아이콘 등의 요소를 화면 전환 시 자연스럽게 이동시키는 데 적합합니다.

Hero 위젯을 사용하면 두 화면 간의 위젯이 동일하다고 느껴지게 만들 수 있으며, 애니메이션 효과를 더해 사용자 경험을 향상시킬 수 있습니다. Flutter의 Hero 위젯은 매우 간단하게 사용할 수 있고, 약간의 코드만으로도 놀라운 효과를 얻을 수 있습니다.

Hero 위젯의 기본 사용법

Hero 위젯을 사용하려면 다음과 같은 기본 구조를 따라야 합니다:

Hero 위젯으로 감싸기: 애니메이션을 적용할 위젯을 Hero로 감싸고, tag 속성을 부여합니다.
화면 전환: 동일한 tag를 가진 Hero 위젯이 다른 화면에서도 사용되어야 하며, 전환 애니메이션이 자동으로 적용됩니다.

간단한 Hero 위젯 예제를 살펴보겠습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('첫 번째 화면')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Hero(
            tag: 'hero-tag',
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('두 번째 화면')),
      body: Center(
        child: Hero(
          tag: 'hero-tag',
          child: Container(
            width: 300,
            height: 300,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

설명:

Hero 위젯: 두 화면에 동일한 Hero 위젯을 배치하고 tag로 'hero-tag'를 지정했습니다. 이 tag 값은 두 화면에서 동일해야 Hero 애니메이션이 작동합니다.
Navigator: 첫 번째 화면에서 클릭 시 두 번째 화면으로 이동하며, 이동 과정에서 Hero 애니메이션이 실행됩니다.

Hero 위젯의 주요 속성

tag:
- Hero 위젯에서 가장 중요한 속성입니다. 두 화면 간 연결된 위젯을 구별하기 위해 동일한 tag를 사용해야 합니다. 이 tag는 고유해야 하며, 동일한 화면에서 여러 Hero 위젯이 있다면 각각 다른 tag를 사용해야 충돌을 피할 수 있습니다.
flightShuttleBuilder:
- Hero 애니메이션 중간에 커스텀 위젯을 표시하고 싶을 때 사용합니다. 예를 들어, 애니메이션 중간에 이미지를 변경하거나, 다른 효과를 추가할 수 있습니다.
transitionOnUserGestures:
- 사용자가 스와이프, 탭 등의 제스처를 사용할 때 Hero 애니메이션이 어떻게 작동할지를 제어합니다. 예를 들어, 드래그하여 뒤로 돌아가는 제스처에서 애니메이션을 계속 유지할지 여부를 결정할 수 있습니다.

Hero 위젯 활용 사례

이미지 확대 애니메이션

Hero 위젯은 이미지를 확대하거나 축소할 때 많이 사용됩니다. 예를 들어, 사진 갤러리 앱에서 이미지를 클릭하면 해당 이미지가 확대되면서 다음 화면으로 넘어가는 애니메이션을 Hero로 쉽게 구현할 수 있습니다.

Hero(
  tag: 'image-tag',
  child: Image.network('https://example.com/image.jpg'),
);

이미지를 작은 썸네일로 첫 번째 화면에 배치하고, 두 번째 화면에서는 해당 이미지를 크게 보여줄 때 Hero 위젯을 활용할 수 있습니다.

프로필 정보 전환

프로필 카드나 사용자 정보를 전환할 때 Hero 애니메이션을 사용할 수 있습니다. 예를 들어, 사용자가 리스트에서 프로필 카드를 클릭하면 해당 카드가 확대되며 상세 정보 화면으로 전환되는 자연스러운 효과를 줄 수 있습니다.

Hero 위젯 사용 시 주의할 점

Hero 위젯은 간단한 애니메이션 효과를 구현하는 데 매우 유용하지만, 몇 가지 주의사항이 있습니다:

tag 충돌 방지:
- 동일한 화면에 여러 개의 Hero 위젯이 있는 경우 tag 값이 고유해야 합니다. 같은 화면 내에서 동일한 tag를 사용하면 충돌이 발생할 수 있습니다.
간단한 애니메이션에 적합:
- Hero 위젯은 간단한 화면 전환 애니메이션에 적합하며, 복잡한 애니메이션이 필요한 경우 다른 애니메이션 기법과 함께 사용해야 할 수 있습니다.
크기 차이:
- 두 화면에서 Hero 위젯의 크기가 너무 많이 다르면 애니메이션이 부자연스럽게 보일 수 있습니다. 크기 차이를 적절하게 유지하는 것이 자연스러운 전환을 위해 중요합니다.

결론

Hero 위젯은 Flutter에서 부드럽고 자연스러운 화면 전환 애니메이션을 제공하는 강력한 도구입니다. 적은 양의 코드로도 사용자가 매끄럽게 화면 간의 전환을 느낄 수 있게 만들어 주며, 특히 이미지나 프로필 카드처럼 시각적인 요소를 효과적으로 연결할 때 유용합니다. 이번 포스트에서는 Hero 위젯의 기본 개념과 사용법을 살펴보았으며, 이를 바탕으로 여러분의 Flutter 프로젝트에서 더욱 매력적인 UI를 구현할 수 있을 것입니다. 도움이 되셨으면 좋겠습니다.