🙆‍♀️

[Flutter]Hero

2022/11/18に公開約700字

https://youtu.be/Be9UH1kXFDw
https://api.flutter.dev/flutter/widgets/Hero-class.html

Hero

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

使用法

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

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


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

その他

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

Discussion

ログインするとコメントできます