如何在 Overlay/PopupRoute 中制作 Hero Widget 动画

Question

I have a settings page with options that show a popup when they are clicked because it can't fit in a small container. I used an Overlay to display the popup ( Overlay.of(context).insert(OverlayEntry()); ). The problem was that it would just pop in place with no animation.

I then tried an alternative approach and followed this article https://medium.com/flutter-community/flutter-route-animations-6ea071be5168 . The problem is that I don't want to use a transition like Fade, Scale, etc. I have a both wrapped in a Hero widget so I want the setting to expand when clicked and shrink when it is being popped.

On the welcome page of the app I have something similar: Welcome Page Screen Recording I achieved this using this code:

onPressed: () => Navigator.of(context).push(
                                PageRouteBuilder(
                                  transitionDuration:
                                      Duration(milliseconds: 600),
                                  pageBuilder: (BuildContext context,
                                      Animation<double> animation,
                                      Animation<double> secondaryAnimation) {
                                    return LogInMock();
                                  },
                                  transitionsBuilder: (BuildContext context,
                                      Animation<double> animation,
                                      Animation<double> secondaryAnimation,
                                      Widget child) {
                                    return Align(
                                      child: FadeTransition(
                                        opacity: animation,
                                        child: child,
                                      ),
                                    );
                                  },
                                ),
                              ),

Both containers have the same hero tag and a very similar structure.

I tried doing this using a PopupRoute (from the medium article above) but it would just fade in without the Hero animating: Settings Page Screen Recording . I am using the same widget so it has the same structure and Hero tag. To make sure it isn't a problem with my widget I made a container wrapped with a Hero and I get the same result.

Here is the PopupRoute navigation code:

Navigator.push(
              context,
              CustomPopupRoute(
                pageBuilder: (BuildContext context, Animation<double> animation,
                    Animation<double> secondaryAnimation) {
                  return Test();
                },
                transitionsBuilder: (BuildContext context,
                    Animation<double> animation,
                    Animation<double> secondaryAnimation,
                    Widget child) {
                  return FadeTransition(
                    opacity: animation,
                    child: child,
                  );
                },
              ),
            );

Answer 1

This is a current limitation of Flutter so it is not possible, there is an existing issue on the Flutter GitHub repository.

https://github.com/flutter/flutter/issues/48467