Flutter 画像タップで画像が拡大しページ遷移するやり方 (Heroウィジェット)

今回はFlutterで、画像をタップすると、その画像が拡大しながらページ遷移するようなアニメーションの実装方法を解説します。

使うWidgetはHeroウィジェットです。

FlutterのHeroウィジェットは、画面遷移（ページ遷移）の際にウィジェットをアニメーションさせて移動させるためのウィジェットです。このウィジェットを使うことで、ユーザーが画面遷移中に、あるウィジェット（例えば画像やボタン）がアニメーションを伴って他の画面に「移動」するような効果を簡単に実現できます。この効果を「Heroアニメーション」と呼びます。

Heroウィジェットを使うと、画面遷移がスムーズで視覚的に自然に感じられ、より直感的で魅力的なUXを実現できます。

Heroウィジェットの使い方は以下の通りです。

使用方法
使用例

使用方法

Heroウィジェットを使うには、遷移元と遷移先の両方で同じtagを指定します。このtagが一致することで、Flutterはそれらのウィジェットが同一のものとして認識し、アニメーションでつなげます。

使用例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hero Animation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hero Animation Demo'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            // 画面遷移
            Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => SecondScreen()),
            );
          },
          child: Hero(
            tag: 'hero-tag',  // tagを指定
            child: ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: Image.asset('assets/flutter_logo.png', width: 200), // 表示する画像
            ),
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Hero(
          tag: 'hero-tag',  // こちらも同じtagを指定
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Image.asset('assets/flutter_logo.png', width: 400), // 画面遷移先の画像
          ),
        ),
      ),
    );
  }
}

上記の例では、ユーザーが最初の画面（FirstScreen）の画像をタップすると、画像がスムーズに次の画面（SecondScreen）に遷移するように見えます。

細かく説明すると、
Heroウィジェット: 画面遷移時にアニメーションを適用したいウィジェットをHeroでラップします。この例では、画像をHeroウィジェットで囲んでいます。
tag属性: tag属性は、遷移元と遷移先のウィジェットを関連付けるために使用します。遷移元（FirstScreen）と遷移先（SecondScreen）の両方で同じtagを指定することが必要です。この例では'hero-tag'というtagを使用しています。
Navigator.push: ユーザーが画像をタップすると、Navigator.pushを使って次の画面（SecondScreen）に遷移します。
アニメーション: 画面遷移中、画像がアニメーションで遷移します。遷移元と遷移先で同じtagが使われることで、Flutterは自動的にどのウィジェットが対応するものかを認識し、アニメーションを行います。