A dart package for Flutter that allows co-ordinated page transitions that animate the previous route as well as the incoming route.
demo.mp4
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:
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
.
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
.
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.
See example.
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
,Animation
and childWidget
and returns the transformed widget. This is simply passed to thetransitionsBuilder
of thePageRouteBuilder
superclass, which you're probably familiar with. - getExitTransition: similar to the
entryTransitionBuilder
, however, in practice theBuildContext
will be theBuildContext
of theNavigator
and the childWidget
will 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.