Flutterの今週のWidgetをやってみた その4 Hero

こんにちは、株式会社PentagonでFlutterを使ったアプリ開発をしているd-ariakeです。
https://pentagon.tokyo
今日は「Flutter Widget of the Week」という動画でHeroについて学んでみたのでまとめてみます!
動画によると、Heroを使えば画面遷移をしてもHeroで囲んだ同一の子要素を表示したままアニメーション遷移をしてくれます。遷移前と遷移後のページの同一コンテンツには、同一のtagパラメタを与えれば良いみたいです。
↓ 私も今回勉強した知識を使って簡単なサンプルを作ってみました!

import 'package:flutter/material.dart';

void main() {
 runApp(
   MaterialApp(
     title: 'TestApp',
     theme: ThemeData(primarySwatch: Colors.blue),
     home: MyPage(),
   ),
 );
}

/// 参考: https://youtu.be/Be9UH1kXFDw
class MyPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: const Text('TestApp')),
     body: Column(
       children: [
         const Padding(
           padding: EdgeInsets.all(16),
           child: Text('Flutterは好きですか?'),
         ),
         Card(
           margin: const EdgeInsets.all(8),
           child: InkWell(
             onTap: () {
               final route = MaterialPageRoute<void>(
                 builder: (context) => MyPage2(),
               );
               Navigator.push(context, route);
             },
             child: Padding(
               padding: const EdgeInsets.all(8),
               child: Row(
                 children: const [
                   Hero(
                     tag: 'HERO_FLUTTER',
                     child: FlutterLogo(size: 64),
                   ),
                   Padding(
                     padding: EdgeInsets.all(8),
                     child: Text('Flutter大好き!'),
                   ),
                 ],
               ),
             ),
           ),
         ),
       ],
     ),
   );
 }
}

class MyPage2 extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: const Text('TestApp')),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: const [
           Padding(
             padding: EdgeInsets.all(16),
             child: Text('あなたはFlutterが大好き!'),
           ),
           Hero(
             tag: 'HERO_FLUTTER',
             child: FlutterLogo(size: 128),
           ),
         ],
       ),
     ),
   );
 }
}

とてもモダンな感じがしてかっこいいですね!
みなさんも是非Heroを使ってみてください!