page_animation_transition #

A lightweight Flutter package for adding beautiful, customizable page route transition animations — slide, fade, scale, rotate, size, and diagonal transitions — to Navigator.push, named routes, and declarative routers like go_router, with full control over duration and easing curves. No boilerplate PageRouteBuilder or Page code required.

If you're searching for a Flutter page transition animation package, a custom Flutter route transition, a way to animate Navigator push/pop transitions, or custom page transitions for go_router, this package gets you there in one line of code.

Table of contents #

• Why page_animation_transition?
• Installation
• Quick start
• Available transitions
• Customizing duration and curves
• Using with named routes
• Using with go_router and other Router-based navigation
• Example app
• FAQ
• Support this project
• Contributing
• License

Why page_animation_transition? #

• 18 ready-made transitions — slide (4 directions), slide + fade, fade, scale, scale + fade, rotate, rotate + fade, size, and 4 diagonal slides — covering the vast majority of page-transition needs out of the box.
• One-line usage — wrap any page in PageAnimationTransition instead of hand-rolling a PageRouteBuilder with Tweens and AnimatedBuilders.
• Fully customizable timing — set duration, reverseDuration, curve, and reverseCurve per navigation call, so transitions match your app's motion design instead of a fixed default.
• Works with every routing strategy — imperative Navigator.push, named routes via onGenerateRoute, and declarative Navigator 2.0 routers such as go_router, auto_route, Beamer, routemaster, and VRouter via the bundled PageAnimationTransitionPage.
• Zero extra dependencies — built entirely on Flutter's own PageRouteBuilder, Page, Tween, and transition widgets, so it stays small and has nothing extra to break or bloat your app.
• Extensible — implement PageAnimationInterface to plug in your own custom transition alongside the built-in ones.

Installation #

Add page_animation_transition to your pubspec.yaml:

dependencies:
  page_animation_transition: ^latest_version

Then fetch it:

flutter pub get

A single import gives you PageAnimationTransition and every transition type:

import 'package:page_animation_transition/page_animation_transition.dart';

Quick start #

Navigator.of(context).push(
  PageAnimationTransition(
    page: const PageTwo(),
    pageAnimationType: LeftToRightTransition(),
  ),
);

That's it — no custom PageRouteBuilder, no manual Tween setup.

Available transitions #

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: BottomToTopTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: TopToBottomTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: RightToLeftTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: LeftToRightTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: FadeAnimationTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: ScaleAnimationTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: RotationAnimationTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: TopToBottomFadedTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: BottomToTopFadedTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: RightToLeftFadedTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: LeftToRightFadedTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: ScaleFadedTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: RotationFadedTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: SizeAnimationTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: TopLeftToBottomRightTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: BottomRightToTopLeftTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: TopRightToBottomLeftTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: BottomLeftToTopRightTransition()));

Customizing duration and curves #

PageAnimationTransition accepts optional duration, reverseDuration, curve, and reverseCurve parameters so you're not limited to the default timing:

Navigator.of(context).push(PageAnimationTransition(
  page: const PageTwo(),
  pageAnimationType: FadeAnimationTransition(),
  duration: const Duration(milliseconds: 800),
  reverseDuration: const Duration(milliseconds: 400),
  curve: Curves.easeInOutBack,
  reverseCurve: Curves.easeIn,
));

Using with named routes #

Define the onGenerateRoute property on your MaterialApp and return a PageAnimationTransition for each named route:

onGenerateRoute: (settings) {
  switch (settings.name) {
    case '/pageTwo':
      return PageAnimationTransition(
        page: const PageTwo(),
        pageAnimationType: LeftToRightFadedTransition(),
      );
    default:
      return null;
  }
},

Then navigate as usual:

Navigator.pushNamed(context, '/pageTwo');

Using with go_router and other Router-based navigation #

For apps built on Flutter's declarative Navigator 2.0 Router API — including go_router, auto_route, Beamer, routemaster, and VRouter — use PageAnimationTransitionPage instead of PageAnimationTransition. It's a standard Page implementation, so it plugs into any router that builds a list of Pages, with no dependency on go_router (or any other router package) required.

With go_router:

GoRoute(
  path: '/pageTwo',
  pageBuilder: (context, state) => PageAnimationTransitionPage(
    key: state.pageKey,
    child: const PageTwo(),
    pageAnimationType: LeftToRightFadedTransition(),
    duration: const Duration(milliseconds: 400),
  ),
),

With a raw Navigator(pages: ...) (or any other Router delegate that consumes Pages):

Navigator(
  pages: [
    PageAnimationTransitionPage(
      key: const ValueKey('pageOne'),
      child: const PageOne(),
      pageAnimationType: FadeAnimationTransition(),
    ),
    if (showPageTwo)
      PageAnimationTransitionPage(
        key: const ValueKey('pageTwo'),
        child: const PageTwo(),
        pageAnimationType: LeftToRightTransition(),
      ),
  ],
  onDidRemovePage: (page) => setState(() => showPageTwo = false),
);

PageAnimationTransitionPage supports the same duration, reverseDuration, curve, and reverseCurve customization as PageAnimationTransition (see Customizing duration and curves), plus maintainState, fullscreenDialog, opaque, barrierDismissible, barrierColor, and barrierLabel for full parity with MaterialPage and go_router's CustomTransitionPage.

A runnable go_router example lives in example/lib/go_router_main.dart — run it with flutter run -t lib/go_router_main.dart from the example/ directory.

Example app #

A complete, runnable example with a button for every transition (including a custom duration/curve demo) lives in the example/ directory. Clone this repository and run:

cd example
flutter run

A second entry point, example/lib/go_router_main.dart, demonstrates PageAnimationTransitionPage wired up with go_router:

cd example
flutter run -t lib/go_router_main.dart

FAQ #

How do I add a page transition animation in Flutter? Wrap the page you're navigating to in a PageAnimationTransition and pass it to Navigator.push (or return it from onGenerateRoute) instead of using MaterialPageRoute — see Quick start.

Can I control how fast the transition animates? Yes — pass duration (and optionally reverseDuration) to PageAnimationTransition. See Customizing duration and curves.

Can I use an easing curve like Curves.easeInOut or a bounce effect? Yes — pass curve and, if you want a different easing on pop, reverseCurve.

Can I write my own custom transition? Yes — implement PageAnimationInterface's single animate method and pass an instance of your class as pageAnimationType.

Does this work with go_router? Yes — use PageAnimationTransitionPage (a standard Flutter Page) as the return value of a GoRoute's pageBuilder. See Using with go_router and other Router-based navigation.

Does this work with auto_route, Beamer, routemaster, or VRouter? Yes — PageAnimationTransitionPage is a plain Page<T> with no dependency on go_router, so it works with any router that builds a list of Pages, including auto_route, Beamer, routemaster, and VRouter.

Does this replace Navigator or go_router? No — PageAnimationTransition (imperative) and PageAnimationTransitionPage (declarative) plug directly into Flutter's existing routing APIs. Neither changes how you manage routes, only how they animate.

Support this project #

If this package saved you time, consider:

• Starring the repository on GitHub — it helps other Flutter developers discover the package.
• Buying me a coffee on Ko-fi if you'd like to support ongoing maintenance and new features.

Contributing #

Issues and pull requests are welcome on GitHub. If you'd like to add a new transition, implement PageAnimationInterface in lib/animations/ following the existing examples and add a widget test in test/.

License #

MIT