Heroクラスで画面間のWidgetアニメーションを行う

はじめに

こちらはFlutter #2 Advent Calendar 2018 の投稿記事です。

Heroクラスとは？

画面間を行き来するWidgetをアニメーションさせることができます。
どういうことか、実際に動きを見たほうがわかりやすいかと思います。

Hero

このように、Heroクラスを使えば画面間のWidgetをシームレスにアニメーションさせることができます。

使い方

最初の画面で、画面間共有をしたいWidgetをHeroクラスでラップします。

Hero(
   tag:'hero_tag', // 任意の文字列
   child: Image.asset(
      'images/image.png',
      width: 80.0,
      height: 80.0,
   ),
),

引数のtagには任意の文字列を指定します。
あとは遷移先の画面で上記と同じHeroウィジェットを配置すれば、遷移前の位置から遷移先の位置に移動アニメーションが行われます

画像の実装のソースコード全文をGitHubにアップしました。参考にどうぞ。

github.com

github.com

Heroクラス自体は、子ウィジェットが同じWidgetかどうかは関係なくアニメーションを行うので、遷移先のHero.childに異なるWidgetを指定してもアニメーションは問題なく行われます。

また、アニメーションをカスタマイズしたい場合はcreateRectTweenプロパティにアニメーションを指定する必要があります。
こちらはまだ勉強不足なのでそのうち書きたいと思います。

注意点

WidgetでHeroウィジェットが複数あった時、tagが重複するとクラッシュします。
tagは独自クラスで定数として定義しておくと良いと思います。