Circle reveal page route transition in Flutter

  • 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

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

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

Choosing the unknown

Love podcasts or audiobooks? Learn on the go with our new app.

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
József Koller

József Koller

Choosing the unknown

More from Medium

Google Sign-in in Flutter

FLUTTER FESTIVAL 2022

Flutter Project Build Warning: Mapping new ns Warning Solution

Add Firebase to a flutter app with firebase CLI