Having watched Marcin Szałek’s excellent talk on complex UIs in Flutter, I was looking for some interesting UI interactions to experiment with and found this shot on dribbble. What caught my eye was the screen transition, which reveals a new screen by expanding a circular clip.

If you’re interested, this route is available on pub.dev (circular_clip_route).

While implementing the route, I found that a key problem was anchoring the transition animation to the Widget which pushes the route, but the solution is useful in general, for example for menus (like [PopupMenuButton](https://api.flutter.dev/flutter/material/PopupMenuButton-class.html)) or tooltips.

Locating the Anchor Widget in the Destination Route

To position anything relative to an anchor Widget inside the destination route, we need the geometry of the anchor Widget in the coordinate system of the destination route.

#flutter #route #anchor #custom