Hero 위젯으로 화면 매끄럽게 전환하기

Odyssey·2024년 10월 11일

flutter hero

flutter_study

목록 보기

7/9

Hero 위젯은 Flutter에서 화면 전환 시 매끄럽고 시각적인 애니메이션 효과를 제공하는 위젯이다.

페이지 이동 시 두 화면 간의 특정 요소를 자연스럽게 연결해주는 기능을 하며, 사용자가 시각적으로 일관된 경험을 느낄 수 있도록 도와준다.

이 애니메이션은 Material Design 가이드라인을 따르며, 페이지 전환 시 특정 위젯이 한 화면에서 다른 화면으로 부드럽게 이동하는 효과를 제공한다.

개인적인 생각으로는 Framer Motion과 매우 유사한 기능을 갖고 있다.
React에서의 Framer Motion도 알아보면 좋을 것이다.

Hero 위젯의 주요 특징

애니메이션의 연결: Hero 위젯은 두 개의 화면 간에 같은 위젯을 애니메이션으로 연결해준다. 이를 통해 사용자에게 일관성 있는 전환 효과를 제공한다.
간편한 설정: 간단하게 위젯을 설정하는 것만으로 복잡한 애니메이션 효과를 손쉽게 구현할 수 있다.
고유 태그 사용: 화면 전환 애니메이션의 시작과 끝을 식별하기 위해 고유한 태그(tag)를 사용한다.

Hero 위젯의 사용법

Hero 위젯을 사용하기 위해서는 화면 전환 전후의 두 위젯에 동일한 tag 값을 설정해야 한다. 이 tag는 두 화면 간의 Hero 위젯을 연결하는 역할을 한다.

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('Hero Animation Example')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Hero(
            tag: 'hero-image',
            child: Image.network(
              'https://flutter.dev/images/catalog-widget-placeholder.png',
              width: 100.0,
            ),
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Hero(
          tag: 'hero-image',
          child: Image.network(
            'https://flutter.dev/images/catalog-widget-placeholder.png',
            width: 300.0,
          ),
        ),
      ),
    );
  }
}

코드 설명

Hero 위젯: FirstScreen과 SecondScreen에서 각각 동일한 tag 값을 가진 Hero 위젯을 사용하고 있다.
tag 속성: Hero 위젯 간의 연결 고리 역할을 한다. 두 화면의 Hero 위젯은 같은 tag 값을 가져야 애니메이션이 제대로 동작한다.
애니메이션 동작: 사용자가 이미지를 탭하면, 이미지가 첫 번째 화면에서 두 번째 화면으로 부드럽게 확대되며 이동한다.

Hero 위젯의 동작 원리

Hero 위젯은 Flutter의 네비게이션 스택에 있는 두 화면을 기반으로 애니메이션을 실행한다.

두 화면 간에 동일한 tag를 가진 Hero 위젯을 찾아 애니메이션을 적용하는 방식이다.

이때, Hero 애니메이션은 Flutter의 flights라는 개념을 사용하여 위젯을 한 화면에서 다른 화면으로 이동시키며, 이 과정에서 자연스러운 확대 또는 축소 효과를 제공한다.

Hero 위젯의 장점

시각적 일관성: 화면 전환 시 사용자가 같은 요소를 인식하도록 도와줘, 애니메이션의 흐름이 자연스럽게 연결된다.
간편한 구현: 복잡한 애니메이션 설정 없이 Hero 위젯과 tag만 지정하면 된다.
성능 최적화: Flutter의 애니메이션 시스템을 사용해 최적화된 퍼포먼스를 제공한다.

Hero 위젯의 한계

중복된 태그 문제: 동일한 tag를 여러 곳에서 사용하면 애니메이션이 올바르게 동작하지 않을 수 있다. 각 Hero 위젯의 tag는 유일해야 한다.
복잡한 애니메이션 제한: 기본적인 이동 애니메이션 외에 커스텀 애니메이션을 적용하는 데는 제약이 있다.
비동기 화면 전환 문제: 비동기 네비게이션 처리 중에 Hero 애니메이션이 예상치 못한 동작을 할 수 있다.