Flutter Hero 위젯

 

from GPT

 

 

Flutter의 Hero 위젯은 화면 전환 시 두 개의 위젯 사이에서 고유한 애니메이션 효과를 만들어 줍니다. 예를 들어, 두 개의 화면 간에 이미지를 공유할 때, 첫 번째 화면에서 이미지를 탭하면 두 번째 화면으로 전환되면서 해당 이미지가 크게 나타나고, 두 번째 화면에서 다시 첫 번째 화면으로 전환될 때 해당 이미지가 작아지면서 원래의 위치로 이동하는 등의 애니메이션을 제공합니다.

Hero 위젯은 다음과 같은 기능을 제공합니다.

1. Hero 애니메이션 생성: Hero 위젯은 두 화면 사이에서 애니메이션을 생성합니다. 이 애니메이션은 두 화면 사이에서 공유되는 위젯의 위치, 크기, 색상, 모양 등을 조정하여 만듭니다.
2. 고유한 태그: 각 Hero 위젯은 고유한 태그를 가집니다. 이 태그는 동일한 화면에서 다른 Hero 위젯과 구별됩니다.
3. Hero 위젯의 위치 조정: Hero 위젯은 화면 전환 시 자동으로 위치를 조정합니다. 이를 통해 두 개의 화면 간에 일관된 애니메이션 효과를 유지할 수 있습니다.

Hero 위젯을 사용하려면, 두 개의 화면 간에 공유되는 위젯을 만들고 각 위젯에 Hero 위젯을 추가해야 합니다. 이후, Navigator.push() 메서드를 사용하여 첫 번째 화면에서 두 번째 화면으로 이동할 때 Hero 위젯이 있는 위젯을 탭하면 애니메이션이 시작됩니다.

 

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (_) => SecondScreen(),
            ),
          );
        },
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://picsum.photos/250?image=9',
            ),
          ),
        ),
      ),
    );
  }
}

첫 번째 화면에서는 GestureDetector로 감싸진 Hero 위젯을 사용하여 이미지를 렌더링하고,

해당 위젯의 태그는 'imageHero'입니다. 두 번째 화면에서도 GestureDetector로 감싸진 Hero 위젯을 사용하여 같은 이미지를 렌더링합니다. 이 때, 두 번째 위젯의 태그도 'imageHero'로 설정하여 두 화면 사이에서 애니메이션 효과를 만들어줍니다.

 

첫 번째 화면에서 이미지를 탭하면 두 번째 화면으로 전환되면서 해당 이미지가 확대되어 나타나고, 두 번째 화면에서 다시 첫 번째 화면으로 전환될 때 해당 이미지가 축소되면서 원래의 위치로 이동합니다.