Flutter로 멋진 Hero 애니메이션 구현하기: 화면 간 부드러운 전환 만들기

Flutter에서 화면 간 전환은 사용자 경험을 크게 향상시키는 중요한 요소입니다. Hero 위젯은 이런 전환을 부드럽게 만들어주는 강력한 도구입니다. 이번 포스트에서는 Hero 위젯을 활용하여 두 화면 간 애니메이션 효과를 구현하는 방법을 단계별로 살펴보겠습니다.

참고. Animate a widget across screens

Hero 위젯이란 무엇인가요?

Hero 위젯은 Flutter에서 특정 위젯을 두 화면 사이에서 애니메이션으로 연결할 때 사용됩니다. 사용자가 이미지나 버튼을 클릭하면, 해당 요소가 첫 번째 화면에서 두 번째 화면으로 "날아가는" 효과를 제공합니다. 이를 통해 두 화면 간의 시각적 연결을 강조하고 사용자 경험을 더욱 직관적으로 만듭니다.

Hero 애니메이션 구현 단계

1. 두 화면에 동일한 이미지 표시

먼저, 두 화면을 생성하고 동일한 이미지를 표시합니다. GestureDetector를 사용해 화면 전환을 처리합니다.

import 'package:flutter/material.dart';

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Main Screen')),
      body: GestureDetector(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return const DetailScreen();
          }));
        },
        child: Image.network(
          'https://picsum.photos/250?image=9',
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Image.network(
            'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

2. Hero 위젯 추가

이제 Hero 위젯을 활용해 애니메이션 효과를 구현합니다. Hero 위젯은 두 가지 주요 속성을 필요로 합니다:

• tag: 애니메이션 연결을 위한 고유 식별자.
• child: 애니메이션에 사용될 위젯.

첫 번째 화면에 Hero 위젯을 추가합니다.

Hero(
  tag: 'imageHero',
  child: Image.network(
    'https://picsum.photos/250?image=9',
  ),
)

두 번째 화면에도 동일한 Hero 위젯과 tag를 사용합니다.

Hero(
  tag: 'imageHero',
  child: Image.network(
    'https://picsum.photos/250?image=9',
  ),
)

Hero 애니메이션이 제공하는 이점

1. 시각적 연결: 두 화면 사이의 관계를 직관적으로 보여줍니다.
2. 사용자 경험 강화: 부드러운 전환 효과로 앱 사용성을 높입니다.
3. 간단한 구현: Flutter의 기본 위젯만으로도 쉽게 적용 가능합니다.

Hero 애니메이션 활용 팁

1. tag의 고유성 보장: 앱 내 모든 Hero 위젯의 tag는 고유해야 합니다.
2. 재사용 가능한 위젯 생성: 동일한 Hero 효과를 여러 화면에 사용하려면 재사용 가능한 위젯으로 만드는 것이 좋습니다.
3. 복잡한 UI와 통합: Hero 위젯을 다른 애니메이션 위젯과 결합해 더 다채로운 전환 효과를 만들어 보세요.

---

결론: Hero 위젯으로 앱에 생동감을 더하자

Hero 위젯은 Flutter에서 시각적으로 매력적인 화면 전환을 구현하기 위한 필수 도구입니다. 간단한 코드로도 앱의 품질을 한 단계 업그레이드할 수 있으며, 사용자 경험을 크게 향상시킬 수 있습니다. 이제 Hero 위젯을 활용해 여러분의 Flutter 앱에 특별한 터치를 더해보세요.

 

import 'package:flutter/material.dart';

void main() => runApp(const HeroApp());

class HeroApp extends StatelessWidget {
  const HeroApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Transition Demo',
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main Screen'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return const DetailScreen();
          }));
        },
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://picsum.photos/250?image=9',
            ),
          ),
        ),
      ),
    );
  }
}