為什么 Hero Widget 在 Flutter 中不起作用？

Question

我正在使用 GetX state 管理器開發 Flutter 應用程序。
我有 2 個屏幕，我想要它們之間的英雄 animation。
這是我的英雄小部件，我在 2 個屏幕中使用它（完全相同）：

Widget heroTest() {
  timeDilation = 2; // This solution doesn't work
  return Hero(
      tag: "test-hero",
      child: Image.asset(
        "assets/google_logo.png",
        width: 100,
      ));
}

為了在我的屏幕之間導航，我使用 GetX 導航方式。 我使用一個常量 ID 來保留我的應用程序的底部導航欄。 即使我刪除了 ID，Hero animation 也不會出現。

void openDetails(MatchModel match) {
    Get.to(
      () => DetailsMatchPage(
        match: match,
      ),
      id: MyRouter.keys["HOME"],
    );
  }

這是我的屏幕 1 的代碼

@override
  Widget build(BuildContext context) {

    return Navigator(
        key: Get.nestedKey(MyRouter.keys["HOME"]),
        onGenerateRoute: (settings) => MaterialPageRoute(
            builder: (_) => Scaffold(
                appBar: homeAppBar(),
                body: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Carousel(),
                      heroTest(), // <- My hero widget
                    ]).....);

還有我的屏幕 2

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appbar(),
      body: SingleChildScrollView(
        child: Column(
          children: [
            heroTest()
          ],
        ),
      ),
    );
  }

我使用之前提到的openDetails()方法瀏覽我的屏幕

環境

我的 iPhone 12 Pro Max 模擬器 flutter 醫生出現了問題：

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.1, on macOS 11.2 20D64 darwin-arm, locale fr-FR)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.54.1)
[✓] Connected device (2 available)

• No issues found!

Answer 1

可能您看不到頁面之間的轉換，因為持續時間為 0 毫秒。

檢查您的主 App() 小部件，如果您使用的是 GetMaterialApp()，您可以像這樣設置 transitionDuration：

 transitionDuration: Duration(milliseconds: 300),

但問題可能是你如何設置主題，你不應該像這樣從頭開始創建它：

//DON'T DO THIS

theme: ThemeData(
      primaryColor: Colors.green,
    )

您應該復制默認主題並覆蓋這些值：

//DO THIS

theme: Theme.of(context).copyWith(
        primaryColor: Colors.green
    )