Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
FlutterでHeroウィジェットを使用してみる
2020.08.08
Flutterでは様々なアニメーションウィジェットがデフォルトで用意されています!
今日はパッケージ無しで使用できる便利なウィジェットの1つである、『Hero』を紹介していきたいと思います。
Flutter公式ドキュメント
コード
アニメーションを使用したい画像ウィジェットを遷移前と遷移後のページのHeroウィジェットで囲む!
Heroウィジェットを囲んだ後は、tagプロパティに2個の画像間で共通なStringを追加しましょう。今回は「logo」としておきました。
Hero(
tag: 'logo',
child: Image.asset('assets/hatch_logo.jpg'),
),
まとめ
今回はFlutterのHeroウィジェットで簡単にアニメーションが追加可能ということを紹介しました。遷移前の画像の数が多くなる場合は、画像名などをtagに指定する方が良いかもしれませんね。
参考資料
Flutterラボ
hatchoutschool
Flutter Daily
Flutterに関する記事を日々更新しています (223本)

【Dart】Stringからint, double, DateTimeに変換する
2020.09.14

【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18

【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01

【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13