Page Navigation Transition

pub package likes pub points license

A comprehensive Flutter package providing 110+ beautiful page navigation transitions for your Flutter applications. Easily add smooth, professional animations when navigating between pages.

Home Screen Categories Transitions

Watch Demo

✨ Features

  • 110+ Pre-built Transitions organized into 14 categories
  • Type-safe generic transitions
  • Customizable duration, curves, and parameters
  • Extension methods for easy navigation
  • Static factory for cleaner code
  • Accessibility-friendly options
  • Zero dependencies - only Flutter SDK required
  • Cross-platform - iOS, Android, Web, Desktop

🆕 New in v1.1.0

  • 🛤️ Named Route Support - Use transitions with onGenerateRoute and named routes
  • 🦸 Hero Transitions - Hero-aware transitions that coordinate with Flutter's Hero widget
  • 🔧 Custom Curve Builder - Fluent API for creating spring, bounce, and elastic curves
  • 🎨 Transition Presets - 8 pre-configured themes (Elegant, Playful, Professional, Gaming, etc.)
  • 🎲 6 New 3D Effects - Origami, Prism, Sphere, ZStack, LayeredDepth, Hologram
  • ⚡ Performance Optimizations - RepaintBoundary wrappers, matrix caching, reduced motion support

📦 Transition Categories

Category Count Examples
🎚️ Slide 9 Slide, Push, Cover, Reveal, Parallax, Elastic, Bouncy
🌫️ Fade 8 Fade, FadeScale, FadeRotation, FadeThrough, CrossFade
🔍 Scale 10 Scale, Zoom In/Out, Pop, Shrink/Grow
🔄 Rotation 9 Rotate, Flip H/V, Spin, Door, Tilt
📐 Size 8 Expand H/V, Split, Unfold, ClipRect
🎨 Material Design 5 Shared Axis, Container Transform, Elevation
🍎 iOS Style 6 Cupertino, Modal, Sheet, Page Curl, App Store Card
🎲 3D Effects 16 Cube, Card Flip, Carousel, Origami, Prism, Sphere, Hologram
⚡ Physics-based 9 Spring, Gravity, Elastic Bounce, Pendulum
✨ Custom Effects 10 Circular Reveal, Blur, Glitch, Accordion, Wipe
💎 Modern UI 9 Glassmorphism, Liquid Swipe, Gooey, Neumorphism
📱 Social Media 11 Story, Reels, Snap, Swipe Card, Stacked Cards
♿ Accessibility 7 No Animation, Simple Fade, Adaptive
🦸 Hero 5 HeroSlide, HeroFade, HeroScale, HeroZoom, HeroContainer

🚀 Getting Started

Installation

Add this to your pubspec.yaml:

dependencies:
  page_navigation_transition: ^1.1.0

Then run:

flutter pub get

Import

import 'package:page_navigation_transition/page_navigation_transition.dart';

📖 Usage

Method 1: Direct Usage

Use transitions directly with Navigator.push:

Navigator.push(
  context,
  SlidePageTransition<void>(
    page: SecondPage(),
    direction: SlideDirection.fromRight,
    duration: Duration(milliseconds: 300),
  ),
);

Method 2: Extension Methods

Use convenient extension methods on BuildContext or NavigatorState:

// Using BuildContext extension
context.pushSlide(SecondPage());
context.pushFade(SecondPage());
context.pushCubeHorizontal(SecondPage());

// Using NavigatorState extension
Navigator.of(context).pushSpring(SecondPage());
Navigator.of(context).pushCircularReveal(SecondPage());

Method 3: Static Factory Methods

Navigator.push(
  context,
  PageTransitions.slide(SecondPage()),
);

Navigator.push(
  context,
  PageTransitions.cubeHorizontal(SecondPage()),
);

� v1.1.0 Features

🛤️ Named Route Support

Use transitions with Flutter's named routes via TransitionRouter:

final router = TransitionRouter(
  routes: {
    '/': TransitionRouteConfig(
      builder: (context) => HomePage(),
      transitionType: TransitionType.fade,
    ),
    '/details': TransitionRouteConfig(
      builder: (context) => DetailsPage(),
      transitionType: TransitionType.slide,
    ),
  },
);

MaterialApp(
  onGenerateRoute: router.onGenerateRoute,
  initialRoute: '/',
)

🦸 Hero Transitions

Coordinate page transitions with Hero widget animations:

Navigator.push(context, HeroSlidePageTransition(
  page: DetailPage(),
  heroTag: 'product-${product.id}',
  direction: SlideDirection.fromRight,
));

Navigator.push(context, HeroContainerTransformTransition(
  page: DetailPage(),
  heroTag: 'card-${item.id}',
  containerColor: Colors.white,
));

🎨 Transition Presets

Use pre-configured themes for consistent animations:

// Wrap your app with TransitionTheme
TransitionTheme(
  preset: TransitionPreset.elegant,
  child: MaterialApp(...),
)

// Available presets:
TransitionPreset.elegant      // Subtle, sophisticated
TransitionPreset.playful      // Bouncy, energetic
TransitionPreset.professional // Clean, efficient
TransitionPreset.gaming       // Dramatic, impactful
TransitionPreset.minimal      // Fast, no-nonsense
TransitionPreset.iosStyle     // Native iOS feel
TransitionPreset.material     // Material Design standard
TransitionPreset.cinematic    // Slow, dramatic

🔧 Custom Curve Builder

Create custom animation curves with a fluent API:

// Spring curve
final springCurve = CurveBuilder()
  .spring(damping: 0.7, stiffness: 100)
  .build();

// Bounce curve
final bounceCurve = CurveBuilder()
  .bounce(bounces: 3, bounciness: 0.5)
  .build();

// Pre-built curves
TransitionCurves.smoothSpring
TransitionCurves.gentleBounce
TransitionCurves.snappy

🎲 New 3D Effects

Six stunning new 3D transitions:

// Origami paper-folding effect
Navigator.push(context, OrigamiPageTransition(page: NextPage()));

// Prism triangular rotation
Navigator.push(context, PrismPageTransition(page: NextPage()));

// Sphere mapping effect
Navigator.push(context, SpherePageTransition(page: NextPage()));

// Futuristic hologram
Navigator.push(context, HologramPageTransition(
  page: NextPage(),
  hologramColor: Colors.cyan,
));

📋 Transition Examples

Slide Transitions

Navigator.push(context, SlidePageTransition(page: NextPage()));
Navigator.push(context, PushPageTransition(page: NextPage()));
Navigator.push(context, ParallaxPageTransition(page: NextPage()));

3D Transitions

Navigator.push(context, CubeHorizontalPageTransition(page: NextPage()));
Navigator.push(context, CardFlipPageTransition(page: NextPage()));
Navigator.push(context, CarouselPageTransition(page: NextPage()));

Physics-based

Navigator.push(context, SpringPageTransition(page: NextPage()));
Navigator.push(context, ElasticBouncePageTransition(page: NextPage()));
Navigator.push(context, GravityDropPageTransition(page: NextPage()));

Modern UI

Navigator.push(context, GlassmorphismPageTransition(page: NextPage()));
Navigator.push(context, LiquidSwipePageTransition(page: NextPage()));
Navigator.push(context, NeumorphismPageTransition(page: NextPage()));

⚙️ Configuration

All transitions support common parameters:

SlidePageTransition(
  page: NextPage(),           // Required: The destination page
  direction: SlideDirection.fromRight,  // Direction of slide
  duration: Duration(milliseconds: 300), // Animation duration
  curve: Curves.easeInOut,    // Animation curve
  settings: RouteSettings(name: '/next'), // Route settings
);

📋 Enums

SlideDirection

  • fromLeft, fromRight, fromTop, fromBottom
  • fromTopLeft, fromTopRight, fromBottomLeft, fromBottomRight

ScaleOrigin

  • center, topLeft, topRight, bottomLeft, bottomRight
  • topCenter, bottomCenter, centerLeft, centerRight

TransitionType (for named routes)

  • slide, slideUp, fade, fadeScale, scale
  • rotation, cubeHorizontal, cubeVertical, cardFlip
  • cupertino, sharedAxis, spring, circularReveal, none

👤 Author

Satish Parmar

LinkedIn GitHub

Other Packages by Author

Package Description
📸 photo_opener_view A beautiful photo viewer package for Flutter
⭐ smart_review_prompter Smart app review prompting for Flutter
🎬 page_navigation_transition 110+ page navigation transitions

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

⭐ Support

If you find this package helpful, please give it a ⭐ on GitHub!

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ by Satish Parmar

Libraries

page_navigation_transition
A comprehensive Flutter package for beautiful page navigation transitions.