【Flutter】Hero|画面遷移時に画像をアニメーション移動・拡大(縮小)させる

今回はHeroの基本的な使い方を紹介します。

Heroを使えば指定したWidgetを画面遷移する際にアニメーションで移動させたり、サイズを拡大・縮小させたりできます。

\ 世界最大級のオンライン学習サービス /

目次

Heroの使い方

画面遷移時に指定したWidgetにアニメーションを実装するには画面遷移前と画面遷移後のWidgetをHeroでラップしtagに共通のタグ名を渡します。

下記コードではImage.networkHeroでラップしてアニメーションを実装しています。

class Screen1 extends StatelessWidget {
  const Screen1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Screen1')),
      body: GestureDetector(
        onTap: () => Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const Screen2()),
        ),
        child: Hero(
          tag: 'image',
          child: Image.network(
            'https://images.unsplash.com/photo-1515463892140-58a22e37ff72',
            width: 150,
          ),
        ),
      ),
    );
  }
}
class Screen2 extends StatelessWidget {
  const Screen2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen2'),
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: GestureDetector(
          onTap: () => Navigator.pop(context),
          child: Hero(
            tag: 'image',
            child: Image.network(
              'https://images.unsplash.com/photo-1515463892140-58a22e37ff72',
            ),
          ),
        ),
      ),
    );
  }
}

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Screen1());
  }
}

class Screen1 extends StatelessWidget {
  const Screen1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Screen1')),
      body: GestureDetector(
        onTap: () => Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const Screen2()),
        ),
        child: Hero(
          tag: 'image',
          child: Image.network(
            'https://images.unsplash.com/photo-1515463892140-58a22e37ff72',
            width: 150,
          ),
        ),
      ),
    );
  }
}

//スクリーン2
class Screen2 extends StatelessWidget {
  const Screen2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen2'),
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: GestureDetector(
          onTap: () => Navigator.pop(context),
          child: Hero(
            tag: 'image',
            child: Image.network(
              'https://images.unsplash.com/photo-1515463892140-58a22e37ff72',
            ),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次