[Flutter/플러터] Hero Animation

 

Hero Animation

class MainScreen extends StatelessWidget {
  const MainScreen({Key? key}) : super(key: key);

  @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 {
  const DetailScreen({Key? key}) : super(key: key);

  @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"),),
        ),
      ),
    );
  }
}

Hero 의 태그 값이 동일하면 됩니다.

MainScreen의 Hero의 tag와 DetailScreen의 Hero의 tag가 동일한 것을 보실 수 있습니다.

사용처는 ListView에서 item을 선택했을 때 상세보기로 이동하는 경우 유용하게 사용할 수 있습니다.