Coordinated Page Route
A dart package for Flutter that allows co-ordinated page transitions that animate the previous route as well as the incoming route.
Features
Allows fully customizable animation of the outgoing route page that is synchronized with the incoming route animation.
This package also includes some examples that will hopefully cover some common use cases:
SlidingPushRoute
Abstract class representing the case where an incoming route will "push" out the previous route as it slides in. An initial offset must be specified in subclasses which determines the entry page's initial offset from the center. The exit page will animate to the negative of this offset. This effect works particularly well when at least one of dx or dy has a magnitude of 1 to ensure the pages are in constant contact.
The package comes with 4 implementations right out of the box for the 4 main directions: ForwardPushRoute, BackwardPushRoute, UpwardPushRoute and DownwardPushRoute.
SlidingFadePushRoute
An abstract class that is almost identical to SlidingPushRoute but includes a fade-in on the incoming route and a fade-out on the outgoing route.
Also like SlidingPushRoute, it comes with 4 implementations for 4 directions: ForwardFadePushRoute, BackwardFadePushRoute, UpwardFadePushRoute and DownwardFadePushRoute.
CoordinatedZoomFadeRoute
An example of a more visually interesting fully custom transition that is now possible. The outgoing route expands and fades out while the incoming route expands from a small size and fades in. Because this transition is see-through this should be implemented using transparent pages with the Navigator on an opaque background.
Getting started
See example.
Usage
You must include a CoordinatedRouteObserver in the NavigatorObserver list for any Navigator that you wish to take advantage of the coordinated animation.
For a MaterialApp, that looks like this:
MaterialApp(
navigatorObservers:
[
CoordinatedRouteObserver() // <--- This must go here!
]
)
For a standalone Navigator:
Navigator(
observers:
[
CoordinatedRouteObserver() // <--- This must go here!
]
)
Then simply push your route like normal:
Navigator.of(context).push(ForwardPushRoute((context) => MyPage())),
To make your own animated transitions, simply extend the CoordinatedPageRoute base class and implement the following:
- getEntryTransition: a function that takes a
BuildContext,Animationand childWidgetand returns the transformed widget. This is simply passed to thetransitionsBuilderof thePageRouteBuildersuperclass, which you're probably familiar with. - getExitTransition: similar to the
entryTransitionBuilder, however, in practice theBuildContextwill be theBuildContextof theNavigatorand the childWidgetwill be captured from the previous route (or more specifically the widget built by the overlay entry containing the page built using the previous route's builder).
Because both builders have access to the same animation passed down from the PageRouteBuilder of the incoming route, the animations are synchronized.