Hero animation not working when triggered from inside a modal bottom sheet

[JGeek00]

Is there an existing issue for this?

• I have searched the existing issues
• I have read the guide to filing a bug

Steps to reproduce

1. Add a Image inside a widget triggered with showModalBottomSheet
2. Add a Heroto that Image
3. Create a second widget that will be the screen where we will navigate to
4. Add the same image to that new widget and wrap it with a Hero
5. Use the same tag for both Hero

Expected results

The hero animation should work when it's triggered from inside a modalBottomSheet

Actual results

The animation does not work.

Code sample

Code sample

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Demo",
      theme: ThemeData(
        useMaterial3: true
      ),
      home: const MyStatelessWidget2(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {      
    return Scaffold(
      appBar: AppBar(
        title: const Text("Hero test"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => showModalBottomSheet(
            context: context, 
            builder: (context) => Container(
              padding: const EdgeInsets.symmetric(vertical: 24),
              child: Wrap(
                children: [
                  ListTile(
                    leading: Hero(
                      tag: "hero_test",
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(30),
                        child: Image.network(
                          'https://static.vecteezy.com/packs/media/vectors/term-bg-1-3d6355ab.jpg',
                          width: 40,
                          height: 40,
                        )
                      ),
                    ),
                    title: const Text("Title"),
                    subtitle: const Text("Subtitle"),
                    onTap: () => Navigator.push(context, MaterialPageRoute(
                      builder: (context) => const HeroView()
                    )),
                  )
                ],
              ),
            )
          ), 
          child: const Text("Show modal bottom sheet")
        ),
      )
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: "hero_test",
          transitionOnUserGestures: true,
          child: Image.network('https://static.vecteezy.com/packs/media/vectors/term-bg-1-3d6355ab.jpg')
        )
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Grabacion.de.pantalla.2023-06-22.a.las.21.20.29.mov

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.10.5, on macOS 13.4 22F66 darwin-arm64, locale es-ES)
    • Flutter version 3.10.5 on channel stable at /Users/juan/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 796c8ef792 (9 days ago), 2023-06-13 15:51:02 -0700
    • Engine revision 45f6e00911
    • Dart version 3.0.5
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/juan/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/juan/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] VS Code (version 1.79.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.60.0

[✓] Connected device (3 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64  • Android 13 (API 33) (emulator)
    • macOS (desktop)             • macos         • darwin-arm64   • macOS 13.4 22F66 darwin-arm64
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 114.0.5735.133

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[huycozy]

Thanks for filing the issue. I see there's an open issue addressing the case similar to this #48467. Although the transition order is reversed (from PageRoute to PopupRoute), both cases refer to the same issue.

Closing this issue in favor of #48467, so please follow up on it for further updates. You can leave there your comment with your case and react an upvote to the original comment will help to raise the issue. Thank you!

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.