Why the Hero Widget doesn't work in Flutter?

Question

I'm developping a Flutter app with the GetX state manager.
I have 2 screens and I want a hero animation between them.
Here is my hero widget, I use it in my 2 screens (exactly the same) :

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

To navigate between my screens, I use the GetX navigation way. I use a constant ID to keep the bottom navbar of my app. Even if I delete the ID, the Hero animation doesn't appear.

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

Here is the code of my Screen 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
                    ]).....);

And my screen 2

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

I navigate thought my screens with the openDetails() method mentionned just before

Env

The problem appears with my iPhone 12 Pro Max emulator The flutter doctor :

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!

score 1 · Answer 1 · answered Nov 18 '21 at 11:18

Probably you don't see the transition between pages because the duration is 0 ms.

Check your main App() widget, if you are using GetMaterialApp() you can set transitionDuration like this:

 transitionDuration: Duration(milliseconds: 300),

But probably the issue is how you set the theme, you should not create it from scratch like this:

//DON'T DO THIS

theme: ThemeData(
      primaryColor: Colors.green,
    )

You should copy the default theme and override the values:

//DO THIS

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

Why the Hero Widget doesn't work in Flutter?

Env

1 Answers1