[Flutter] Hero 개념 알고 사용하기

: 위젯 애니메이션이다. 한 화면에서 다른 화면으로 넘어갈 때, 위젯에 애니메이션 효과를 준다. 이 방법은 두 화면을 이어주는 시각적 연결 고리를 만들어 준다.

1. 같은 이미지를 보여주는 2개의 화면 만들기

같은 이미지를 두 개의 화면 모두에 보여줘야 한다. 첫 번째 화면에서 사용자가 이미지를 탭하면 두 번째 화면으로 전환되면서 애니메이션이 발생하게 된다.

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (_) {
            return 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 위젯을 추가하기

두 화면을 하나의 애니메이션으로 연결하기 위해, 각각의 화면에 존재하는 Image위젯을 Hero위젯으로 감싼다. Hero 위젯에 2개의 인자를 넘겨주어야 한다.

💫 Hero위젯을 식별하기 위한 객체로 양쪽 모두 동일한 값을 가져야 한다.

 

• child : 화면 전환 시 애니메이션 효과를 적용할 위젯이다.

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

전체 코드

import 'package:flutter/material.dart';

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

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

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            '<https://picsum.photos/250?image=9>',
          ),
        ),
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (_) {
            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://picsum.photos/250?image=9>',
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

실행화면