title: How do I make a Hero Widget Animate in an Overlay/PopupRoute
body: <p>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 (<code>Overlay.of(context).insert(OverlayEntry());</code>). The problem was that it would just pop in place with no animation.</p>
  <p>I then tried an alternative approach and followed this article <a href="https://medium.com/flutter-community/flutter-route-animations-6ea071be5168" rel="nofollow noreferrer">https://medium.com/flutter-community/flutter-route-animations-6ea071be5168</a>. 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.</p>
  <p>On the welcome page of the app I have something similar: <a href="https://cln.sh/KqRo6j" rel="nofollow noreferrer">Welcome Page Screen Recording</a>
  I achieved this using this code:</p>
  <pre class="lang-dart prettyprint-override"><code>onPressed: () =&gt; Navigator.of(context).push(
                                  PageRouteBuilder(
                                    transitionDuration:
                                        Duration(milliseconds: 600),
                                    pageBuilder: (BuildContext context,
                                        Animation&lt;double&gt; animation,
                                        Animation&lt;double&gt; secondaryAnimation) {
                                      return LogInMock();
                                    },
                                    transitionsBuilder: (BuildContext context,
                                        Animation&lt;double&gt; animation,
                                        Animation&lt;double&gt; secondaryAnimation,
                                        Widget child) {
                                      return Align(
                                        child: FadeTransition(
                                          opacity: animation,
                                          child: child,
                                        ),
                                      );
                                    },
                                  ),
                                ),
  </code></pre>
  <p>Both containers have the same hero tag and a very similar structure.</p>
  <p>I tried doing this using a PopupRoute (from the medium article above) but it would just fade in without the Hero animating: <a href="https://cln.sh/VXcGRK" rel="nofollow noreferrer">Settings Page Screen Recording</a>. 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.</p>
  <p>Here is the PopupRoute navigation code:</p>
  <pre class="lang-dart prettyprint-override"><code>Navigator.push(
                context,
                CustomPopupRoute(
                  pageBuilder: (BuildContext context, Animation&lt;double&gt; animation,
                      Animation&lt;double&gt; secondaryAnimation) {
                    return Test();
                  },
                  transitionsBuilder: (BuildContext context,
                      Animation&lt;double&gt; animation,
                      Animation&lt;double&gt; secondaryAnimation,
                      Widget child) {
                    return FadeTransition(
                      opacity: animation,
                      child: child,
                    );
                  },
                ),
              );
  </code></pre>