[flutter] Hero를 이용한 이미지 전환 애니메이션 구현하기

08 Dec 2023

flutter

이번에는 Flutter 앱에서 Hero 위젯을 사용하여 이미지 전환 애니메이션을 구현하는 방법을 살펴보겠습니다. Hero 위젯은 두 화면 전환시에 이미지나 위젯의 전환 애니메이션을 부드럽게 처리할 수 있도록 도와줍니다.

Hero 애니메이션의 장점

Hero 애니메이션은 화면 전환간에 이미지나 위젯을 부드럽게 전환하여 사용자 경험을 향상시킵니다. 이를 통해 앱의 전환 효과를 더욱 생동감있게 만들고, 사용자들에게 집중을 끌 수 있습니다.

Hero를 이용한 이미지 전환 애니메이션 구현하기

아래는 간단한 예시 코드로 Hero 위젯을 사용하여 이미지 전환 애니메이션을 구현하는 방법을 보여줍니다.

첫 번째 화면 코드:

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => SecondScreen(),
            ),
          );
        },
        child: Hero(
          tag: 'imageTransition',
          child: Image.asset('assets/first_image.png'),
        ),
      ),
    );
  }
}

두 번째 화면 코드:

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Hero(
          tag: 'imageTransition',
          child: Image.asset('assets/second_image.png'),
        ),
      ),
    );
  }
}

위 코드에서 FirstScreen은 터치 이벤트를 감지하여 SecondScreen으로 화면을 전환하고, Hero 위젯을 활용하여 이미지 전환 애니메이션을 구현합니다. 두 화면 모두 같은 tag를 사용하여 동일한 이미지에 대한 전환을 처리합니다.

위 코드를 사용하면 사용자가 첫 번째 화면의 이미지를 터치하면 부드러운 전환 애니메이션이 적용된 채로 두 번째 화면으로 전환됩니다.

결론

이렇게 Flutter에서 Hero를 사용하여 이미지 전환 애니메이션을 구현할 수 있습니다. Hero를 적절히 활용하여 사용자 경험을 개선하고, 앱의 전환 효과를 더욱 매끄럽게 만들 수 있습니다. 만약 이미지 전환 애니메이션을 적용해야 할 경우, Hero 위젯을 고려해 보세요.

참고: Flutter 공식 문서 - Hero 애니메이션