Heroクラスで画面間のWidgetアニメーションを行う
はじめに
こちらはFlutter #2 Advent Calendar 2018 の投稿記事です。
Heroクラスとは?
画面間を行き来するWidgetをアニメーションさせることができます。 どういうことか、実際に動きを見たほうがわかりやすいかと思います。
このように、Heroクラスを使えば画面間のWidgetをシームレスにアニメーションさせることができます。
使い方
最初の画面で、画面間共有をしたいWidgetをHeroクラスでラップします。
Hero(
tag:'hero_tag', // 任意の文字列
child: Image.asset(
'images/image.png',
width: 80.0,
height: 80.0,
),
),
引数のtagには任意の文字列を指定します。 あとは遷移先の画面で上記と同じHeroウィジェットを配置すれば、遷移前の位置から遷移先の位置に移動アニメーションが行われます 画像の実装のソースコード全文をGitHubにアップしました。参考にどうぞ。
Heroクラス自体は、子ウィジェットが同じWidgetかどうかは関係なくアニメーションを行うので、遷移先のHero.childに異なるWidgetを指定してもアニメーションは問題なく行われます。 また、アニメーションをカスタマイズしたい場合はcreateRectTweenプロパティにアニメーションを指定する必要があります。 こちらはまだ勉強不足なのでそのうち書きたいと思います。
注意点
WidgetでHeroウィジェットが複数あった時、tagが重複するとクラッシュします。 tagは独自クラスで定数として定義しておくと良いと思います。