[Flutter] 플러터 Hero 애니메이션 구현

이번에는 Hero 애니메이션에 대해 알아보자.

Hero 애니메이션은 tag로 연결된 image를 다른 화면에 띄어주는 위젯이다.

이미지를 확대하여 보거나 특정한 위젯을 따로 보고 싶을 때 사용하면 유용할 것 같다. 

코드

import 'package:flutter/material.dart';

class HeroScreen extends StatefulWidget {
  const HeroScreen({Key? key}) : super(key: key);

  @override
  _HeroScreenState createState() => _HeroScreenState();
}

class _HeroScreenState extends State<HeroScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://flutter-kr.io/images/flutter-logo-sharing.png',
          ),
        ),
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return DetailScreen();
          }));
        },
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://flutter-kr.io/images/flutter-logo-sharing.png',
              fit: BoxFit.contain,
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

위에서부터 코드를 보게 되면 GestureDetector 자식은 hero 위젯으로 두 페이지의 공통된 영역을 tag를 통해 child 위젯을 연결하게 된다. 결국 GestureDetector를 통해 이미지를 누르게 되면 DetailScreen으로 이동되어 연결되어 있는 hero 위젯이 작동하게 된다. 

그런데 tag를 서로 다르게 해도 작동되는 것을 보아 무언가가 이상한 것 같지만.. 코드는 위와 같다.

위 코드를 모두 작성하고 실행하면 다음 영상과 같이 실행되는 것을 확인할 수 있다.

참고

화면을 넘나드는 위젯 애니메이션