Circle reveal page route transition in Flutter

I’m gonna be short for this one because the gif and the idea itself is self-explanatory. I’ve started with the “Everything you need to know about Flutter page route transition” [link] article and then I wanted something more interesting so I looked after “circle reveal effect” and I found this awesome plugin [link]. After a little fiddling, I came up with this:

It has its quirks but gets the job done.

• Center can be basic (alignment) and precise (offset). To do precise centering we will need global X,Y coordinates but that must be provided by you.
• Radius configuration. Make sure that the maximal radius is properly set because if not, the outer area will be black after the transition finishes. (The recommended max radius is the distance between the transition center and the furthermost point of the screen. Be extra careful with offscreen offsets.)
• Entry/origin screen will not be rendered when the animation ends. (This behaviour can be changed though but it was not in the project scope.)
• Orientation change will cause precision offset to the wrong position. (You might need to check out positioned_tap_detector for getting the global coordinates of the tap.)

The implementation

The credit for the source code of the circular_reveal_clipper.dart goes straight to Alexander Zhdanov.

Great and all, but how can I use it already?

Navigator.push(
  context,
  RevealRoute(
    page: TargetScreen(),
    maxRadius: 800,
    centerAlignment: Alignment.center,
  ),
)

If you have any question, feel free to comment.