FlutterでHeroアニメーションを実装してみた

Heroアニメーションとは

Heroアニメーションとは、画面遷移時に同じ画像をサイズ比率を変えるなどのアニメーションを加えることで、シームレスな画面遷移を実現するためのアニメーションです。
例えば、ECサイトにおいて、お店のアイコンが並んでおり、クリックするとアイコンがそのまま大きくなり、詳細説明ページが表示されるような時に利用します。

サンプル

実装

Hero widgetは呼び出し元と呼び出し先のアイコンと呼び出し先ページのアイコンそれぞれをWrapします。
呼び出し元と呼び出し先の紐付けはtagプロパティにて行っており、それぞれにおいて一致するように実装します。
例のように、Hero widgetを利用する際は引数にtagとpathを持たせることが多いと思います。

# 呼び出し元 Hero Widget
class _MyHomePageStaete extends State<MyHomePage> {
.... 省略 ....
          Hero(
            tag: "マクドナルド",
            child: Container(
              height: 100.0,
              width: 100.0,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage("images/logo.jpg"), fit: BoxFit.fill)),
              child: FlatButton(
                onPressed: () {
                  # Popup widgetを呼び出す。
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => Popup("man", "images/logo.jpg"),
                    ),
                  );
                },
              ),
            ),
          ),
.... 省略 ....
}

class Popup extends StatelessWidget {
  final String tag;
  final String imagePath;
  Popup(this.tag, this.imagePath);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Expanded(
              flex: 7,
              child: Hero(
                tag: tag,
                child: Container(
                  height: 400.0,
                  width: 400.0,
                  decoration: BoxDecoration(
                      image: DecorationImage(image: AssetImage(imagePath))),
                  child: FlatButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                  ),
                ),
              ),
            ),
            Expanded(
              flex: 3,
              child: Text("This tag is " + tag),
            ),
          ],
        ),
      ),
    );
  }