🙆‍♀️

[Flutter]Hero

2022/11/18に公開

Hero

共有UIパターンのこと
インタラクションのフォーカスを前中央に保ちつつ、ユーザーに画面遷移を表示できる
Heroウィジェットが２つのナビゲータールート間でHeroトランジションを作成し、両ルート間でのウィジェット位置を把握し、位置間の変化をアニメートしてくれる

使用法

遷移開始ページと遷移終了ページの子要素をHero widgetで囲み、tagをつける
※どちらのページでも同じtagを使うことが重要※
綺麗な画面遷移にするには、Hero下のウィジェットツリーを両画面で同一にする

class MyHomePage extends StatelessWidget{
 @override 
  Widget build(BuildContext context) {
   ...
    Hero(
     tag: 'dash',
     child: Image.asset('images/dash.jpq'),
    )
    ...
 }
}  


class MyDetailPage extends StatelessWidget{
 @override 
  Widget build(BuildContext context) {
   ...
    Hero(
     tag: 'dash',
     child: Image.asset('images/dash.jpq'),
    )
    ...
 }
}

その他

画像を囲むだけではなく、clipとの併用で優れたアニメーション効果が実装できる、らしい

Hero

使用法

その他

Discussion