Hero（共有要素の遷移） Hero Animation
一覧の小さな写真が、そのまま飛んでいって次の画面の大きな写真になる。同じ物だとひと目で分かる。
本物の Flutter ウィジェットが動きます（初回は数秒かかります）
※ 動画は動きが分かるよう 1/2 の速さです。「触ってみる」は実際の速さで動きます
別タブで大きく開く ↗どんなもの？
2つの画面に同じ物が出てくるとき、その物を画面をまたいで動かす遷移です。「この写真の詳細を開いた」ことが自然に伝わります。
両方の画面で同じ tag を付けた Hero で包むだけで、Flutter が位置と大きさを補間して飛ばしてくれます。
tag は画面内で重複しない値（ID など）にすること。重複するとエラーになります。
入れ子の Navigator で使うときは、observers に HeroController を渡さないと飛びません。
こんなときに
- 一覧の写真・アイコンを、詳細で大きく見せる
- 同じ物を別の画面で続けて扱うことを伝えたい
避けたい場面
- 飛ぶ物が画面に複数あり、どれが主役か分からなくなる
最小コード
// 一覧
ListTile(
leading: Hero(tag: photo.id, child: Image.network(photo.thumbUrl)),
onTap: () => Navigator.of(context).push(
MaterialPageRoute(builder: (_) => PhotoPage(photo)),
),
)
// 詳細（同じ tag）
Hero(tag: photo.id, child: Image.network(photo.url))使うウィジェット
Hero