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. ()
  • Entry/origin screen will not be rendered when the animation ends. ()
  • Orientation change will cause precision offset to the wrong position. ()

The implementation

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

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

If you have any question, feel free to comment.

--

--

Choosing the unknown

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store