FlutterでHeroウィジェットを使用してみる

Flutterでは様々なアニメーションウィジェットがデフォルトで用意されています！

今日はパッケージ無しで使用できる便利なウィジェットの1つである、『Hero』を紹介していきたいと思います。

Flutter公式ドキュメント

Hero animations

コード

アニメーションを使用したい画像ウィジェットを遷移前と遷移後のページのHeroウィジェットで囲む！

Heroウィジェットを囲んだ後は、tagプロパティに２個の画像間で共通なStringを追加しましょう。今回は「logo」としておきました。

Hero(
   tag: 'logo',
   child: Image.asset('assets/hatch_logo.jpg'),
 ),

まとめ

今回はFlutterのHeroウィジェットで簡単にアニメーションが追加可能ということを紹介しました。遷移前の画像の数が多くなる場合は、画像名などをtagに指定する方が良いかもしれませんね。

参考資料