【问题标题】：Why the Hero Widget doesn't work in Flutter?为什么 Hero Widget 在 Flutter 中不起作用？
【发布时间】：2021-07-24 11:03:16
【问题描述】：

我正在使用 GetX 状态管理器开发 Flutter 应用。
我有 2 个屏幕，我想要它们之间的英雄动画。
这是我的英雄小部件，我在我的 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，英雄动画也不会出现。

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 模拟器上扑扑医生：

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!

【问题讨论】：

标签： flutter flutter-navigation flutter-getx

【解决方案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
    )

【讨论】：