[Flutter] Hero 애니메이션 위젯

Hero 위젯은 화면 전환시 자연스럽게 연결되는 애니메이션을 지원한다. 이전 화면으로 돌아갈 때도 자연스럽게 애니메이션이 동작한다.

Hero 위젯 사용 방법은 애니메이션 효과의 대상이 되는 양쪽 화면의 위젯을 Hero 위젯으로 감싸고, tag 프로퍼티를 반드시 동일하게 지정해야 한다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HeroPage(title: '플러터 테스트'),
    );
  }
}

class HeroPage extends StatelessWidget {
  HeroPage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text(this.title),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => HeroDetailPage(
                        title: this.title,
                      )),
            );
          },
          child: Hero(
            tag: 'image', // 여기서 작성한 태그와 두 번째 페이지의 태그가 동일해야 한다.
            child: Image.asset(
              'assets/IMG_9245.jpeg',
              width: 100,
              height: 100,
            ),
          ),
        ),
      ),
    );
  }
}

// 두 번째 페이지
class HeroDetailPage extends StatelessWidget {
  HeroDetailPage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text(this.title),
      ),
      body: Hero(
        tag: 'image', // 여기서 작성한 태그와 첫 번째 페이지의 태그가 동일해야 한다.
        child: Image.asset('assets/IMG_9245.jpeg'),
      ),
    );
  }
}