Flutterでリストタップで画像表示アニメーションするんやで！[Hero animations]
できひんやんけーーー！！！
というのは、
[タブ→リスト→画像表示]この画面遷移、、要素が絡まると指定要素が重なって、、これがむずい。
前回はタブからリスト表示できたんやけど、リストタップからの画像表示で苦戦。
今回特にこだわったDartPadのみで表示できるように作りたかったんやけど、
画面遷移はどうやら別ファイルを読み込む形が主流らしいな。
けど、画像一枚表示する為に別ファイル一枚作るのはどうかと思って。
試行錯誤してみたけど、、結論から言うと。
できませんでした！！！
m(_ _)m
って事でいつまでも出来ないことに縛られても、もったいないやん！！
（今後の課題やな）
せめてリストタップで画像表示をメインファイルのみで表示できるようにするんやで！！
うまくいかず凹んでた私の前に現れたのは
[Hero animations] !!!
まさに私のヒーローだった。
これは表示するだけでなくアニメーションも付けてくれるんやで！
ListTile(
leading: GestureDetector(
child: Hero(
tag: 'Kokyu-image',
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200521/20200521191250.png",
),
)
),
),
onTap: () => Navigator.push(
context,PageRouteBuilder(
transitionDuration: Duration(seconds: 1),
pageBuilder: (_, __, ___) => Kata2())),
title: Text('弐ノ型：水車',
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
subtitle: Text('にのかた：みずぐるま'),
trailing: Icon(Icons.keyboard_arrow_right),
),
リストタイルで囲ってleading: GestureDetectorの中にヒーローはおるんやで！！
リストに画像アイコンを追加してタグ(Tag)で表示画面と関連付けるんやで！
表示画面はこれ
class Kata2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("弐ノ型：水車"),
),
body: Hero(
tag: "Kokyu-image",
child: Container(
width: double.infinity,
alignment: Alignment.topCenter,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200521/20200521224835.gif",
),
fit: BoxFit.cover)),
),
));
}
}
これもtagを同じ名前にするんやで！
サンプルは弐ノ型だけ実装してみたんやで。
出来た！！！！！
せ、せめて、、お名前を！！！
名乗るほどの者じゃ〜ございません。
ありがとう、、ヒーロー
完。
DartPadで貼り付けて触ってみるんやで！！
