Flutter의 Hero 애니메이션 사용법

Flutter는 아름답고 매끄러운 사용자 인터페이스를 만드는 데 강력한 도구를 제공합니다. 그중 하나가 바로 Hero 위젯을 사용하는 애니메이션입니다. Hero 애니메이션은 두 화면 간의 전환을 부드럽게 연결하여 사용자가 자연스럽게 화면 전환을 느낄 수 있도록 도와줍니다. 이번 글에서는 Flutter에서 Hero 애니메이션을 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. Hero 위젯의 기본 개념

Hero 위젯은 두 화면 간의 전환 동안 공통 요소를 애니메이션으로 연결하는 역할을 합니다. 동일한 tag를 가진 두 Hero 위젯을 사용하면, Flutter는 화면 전환 시 이러한 위젯을 연결하여 자연스럽게 전환 효과를 제공합니다.

2. Hero 위젯 사용하기

두 개의 화면을 만들고, 각 화면에서 동일한 tag를 가진 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('First Screen')),
      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('Second Screen')),
      body: Center(
        child: Hero(
          tag: 'hero-tag',
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

 

위 코드는 첫 번째 화면에서 파란색 박스를 클릭하면 두 번째 화면으로 전환되며, 박스가 크기 변화와 함께 부드럽게 전환되는 예제입니다. 두 화면의 Hero 위젯은 동일한 tag를 가지고 있어야 하며, 이 tag를 통해 Flutter가 두 요소를 연결합니다.

 

728x90

 

 

3. Hero 애니메이션에 이미지 사용하기

Hero 애니메이션은 이미지와 같은 다른 위젯에도 적용할 수 있습니다. 다음 예제는 이미지에 Hero 애니메이션을 적용하는 방법을 보여줍니다.

import 'package:flutter/material.dart';

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

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

class ImageFirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => ImageSecondScreen()),
            );
          },
          child: Hero(
            tag: 'hero-image-tag',
            child: Image.network(
              'https://via.placeholder.com/150',
              width: 150,
              height: 150,
            ),
          ),
        ),
      ),
    );
  }
}

class ImageSecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Hero(
          tag: 'hero-image-tag',
          child: Image.network(
            'https://via.placeholder.com/300',
            width: 300,
            height: 300,
          ),
        ),
      ),
    );
  }
}

 

위 코드는 첫 번째 화면에서 이미지를 클릭하면 두 번째 화면으로 전환되며, 이미지가 크기 변화와 함께 부드럽게 전환되는 예제입니다. Hero 애니메이션을 적용하기 위해 Image 위젯을 Hero 위젯으로 감쌉니다.

 

 

반응형

 

 

4. 복잡한 위젯에 Hero 애니메이션 적용하기

더 복잡한 위젯에도 Hero 애니메이션을 적용할 수 있습니다. 다음 예제는 텍스트와 이미지를 포함한 카드에 Hero 애니메이션을 적용하는 방법을 보여줍니다.

import 'package:flutter/material.dart';

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

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

class CardFirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => CardSecondScreen()),
            );
          },
          child: Hero(
            tag: 'hero-card-tag',
            child: Card(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Image.network(
                    'https://via.placeholder.com/150',
                    width: 150,
                    height: 150,
                  ),
                  Text('This is a card'),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class CardSecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Hero(
          tag: 'hero-card-tag',
          child: Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Image.network(
                  'https://via.placeholder.com/300',
                  width: 300,
                  height: 300,
                ),
                Text('This is a larger card'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

 

위 코드는 텍스트와 이미지를 포함한 카드에 Hero 애니메이션을 적용하여 첫 번째 화면에서 두 번째 화면으로 전환할 때 부드러운 애니메이션을 제공하는 예제입니다.

5. Hero 애니메이션 커스터마이징

Hero 애니메이션은 기본적으로 부드러운 전환을 제공하지만, FlightShuttleBuilder를 사용하여 애니메이션을 커스터마이징할 수 있습니다.

import 'package:flutter/material.dart';

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

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

class CustomHeroFirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => CustomHeroSecondScreen()),
            );
          },
          child: Hero(
            tag: 'custom-hero-tag',
            flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) {
              return ScaleTransition(
                scale: animation.drive(
                  Tween(begin: 0.0, end: 1.0).chain(CurveTween(curve: Curves.easeInOut)),
                ),
                child: fromContext.widget,
              );
            },
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

class CustomHeroSecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Hero(
          tag: 'custom-hero-tag',
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

 

위 코드는 flightShuttleBuilder를 사용하여 커스터마이징된 Hero 애니메이션을 구현하는 예제입니다. ScaleTransition을 사용하여 애니메이션 중에 요소의 크기를 조정합니다.

결론

Flutter에서 Hero 애니메이션을 사용하면 두 화면 간의 전환을 부드럽게 연결하여 사용자 경험을 크게 향상시킬 수 있습니다. Hero 위젯을 사용하여 간단한 애니메이션을 구현하는 방법부터 이미지와 복잡한 위젯에 적용하는 방법, 그리고 애니메이션을 커스터마이징하는 방법까지 다양한 예제를 통해 Hero 애니메이션을 효과적으로 활용할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 매끄럽고 자연스러운 화면 전환을 구현해보세요.