在螢幕之間動畫一個 widget

在使用者從一個螢幕導航到另一個螢幕時，引導他們完成應用通常很有幫助。連線使用者瀏覽應用的常用技術是在一個螢幕到下一個螢幕之間動畫化 Widget。這會建立一個連線兩個螢幕的視覺錨點。

使用 Hero Widget 將 Widget 從一個螢幕動畫到下一個螢幕。本指南使用以下步驟：

1. 建立兩個顯示相同影像的螢幕。
2. 在第一個螢幕上新增 Hero Widget。
3. 在第二個螢幕上新增 Hero Widget。

在此示例中，在兩個螢幕上顯示相同的影像。當用戶點選影像時，將影像從第一個螢幕動畫到第二個螢幕。目前，先建立視覺結構；在後續步驟中處理動畫。

import 'package:flutter/material.dart';

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Main Screen')),
      body: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute<void>(
              builder: (context) {
                return const DetailScreen();
              },
            ),
          );
        },
        child: Image.network('https://picsum.photos/250?image=9'),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Image.network('https://picsum.photos/250?image=9'),
        ),
      ),
    );
  }
}

要透過動畫連線兩個螢幕，請將兩個螢幕上的 Image Widget 包裝在 Hero Widget 中。Hero Widget 需要兩個引數：

tag

一個標識 Hero 的物件。它在兩個螢幕上必須相同。

child

要在螢幕之間動畫的 Widget。

Hero(
  tag: 'imageHero',
  child: Image.network('https://picsum.photos/250?image=9'),
)

為了完成與第一個螢幕的連線，請將第二個螢幕上的 Image 包裝在 Hero Widget 中，該 Widget 具有與第一個螢幕中的 Hero 相同的 tag。

在將 Hero Widget 應用於第二個屏幕後，螢幕之間的動畫就會自動生效。

Hero(
  tag: 'imageHero',
  child: Image.network('https://picsum.photos/250?image=9'),
)

import 'package:flutter/material.dart';

void main() => runApp(const HeroApp());

class HeroApp extends StatelessWidget {
  const HeroApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Transition Demo', home: MainScreen());
  }
}

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Main Screen')),
      body: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute<void>(
              builder: (context) {
                return const DetailScreen();
              },
            ),
          );
        },
        child: Hero(
          tag: 'imageHero',
          child: Image.network('https://picsum.photos/250?image=9'),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network('https://picsum.photos/250?image=9'),
          ),
        ),
      ),
    );
  }
}