flutter_route_shifter 1.0.0 
flutter_route_shifter: ^1.0.0 copied to clipboard
ionicerrrrscode.comA powerful, declarative route transition package with 34+ chainable animations, shared elements, and advanced effects for Flutter applications.
Flutter Route Shifter #
A powerful, declarative route transition package with 34+ chainable animations, shared elements, and advanced effects for Flutter applications.
🎥 View Live Animations: See all 17 animation demos on GitHub - GIFs show each transition in action!
🎬 Animation Showcase #
Fade + Slide |
Scale Animation |
Sequenced Effects |
Glass Morphism |
Shared Elements |
3D Perspective |
✨ Features #
🎨 Rich Animation Library #
|
🚀 Advanced Features #
|
🚀 Quick Start #
Installation #
dependencies:
flutter_route_shifter: ^1.0.0
$ flutter pub get
Basic Usage #
import 'package:flutter_route_shifter/flutter_route_shifter.dart';
// Simple fade transition
final route = RouteShifterBuilder()
.fade(duration: Duration(milliseconds: 300))
.toRoute(page: NextPage());
Navigator.of(context).push(route);
🎨 Animation Effects #
🔹 Core Transitions #
📱 Fade Transitions
// Basic fade in
RouteShifterBuilder()
.fade(
duration: Duration(milliseconds: 400),
curve: Curves.easeInOut,
)
// Fade with opacity control
RouteShifterBuilder()
.fade(
beginOpacity: 0.0,
endOpacity: 1.0,
duration: Duration(milliseconds: 500),
)
📱 Slide Transitions
// Slide from right
RouteShifterBuilder()
.slide(
beginOffset: Offset(1.0, 0.0),
duration: Duration(milliseconds: 300),
)
// Convenient presets
RouteShifterBuilder().slideFromBottom()
RouteShifterBuilder().slideFromLeft()
RouteShifterBuilder().slideFromTop()
📱 Scale Transitions
// Scale up from center
RouteShifterBuilder()
.scale(
beginScale: 0.0,
endScale: 1.0,
alignment: Alignment.center,
)
// Quick presets
RouteShifterBuilder().scaleUp()
RouteShifterBuilder().scaleDown()
📱 Rotation Transitions
// Rotate on entry
RouteShifterBuilder()
.rotation(
beginAngle: -0.5,
endAngle: 0.0,
alignment: Alignment.center,
)
// Full spin effect
RouteShifterBuilder()
.rotation(beginAngle: -6.28) // 2π rotation
🔹 Advanced Effects #
🌟 Glass Morphism
// Glass effect
RouteShifterBuilder()
.glass(
blur: 20.0,
opacity: 0.1,
duration: Duration(milliseconds: 800),
)
🌟 3D Perspective
// 3D perspective flip
RouteShifterBuilder()
.perspective(
rotationX: 0.3,
rotationY: 0.0,
distance: 2.0,
)
🌟 Shear Transform
// Shear effect
RouteShifterBuilder()
.shear(
beginShear: Offset(0.0, 0.0),
endShear: Offset(0.2, 0.0),
duration: Duration(milliseconds: 500),
)
🌟 Sequenced Animations
// Manual timing control
RouteShifterBuilder()
.sequenced(
timings: {
'header': Duration(milliseconds: 0),
'content': Duration(milliseconds: 200),
'footer': Duration(milliseconds: 400),
},
baseEffect: SlideEffect(begin: Offset(0, 0.3)),
)
// Use with SequencedItem widgets
SequencedItem(
id: 'header',
child: Text('Animated Header'),
)
🔹 Creative Effects #
⚡ Glitch Effect
// Digital glitch
RouteShifterBuilder()
.glitch(
intensity: 0.5,
duration: Duration(milliseconds: 600),
)
⚡ Color Tint
// Color overlay transition
RouteShifterBuilder()
.colorTint(
beginColor: Colors.blue.withOpacity(0.8),
endColor: Colors.transparent,
)
⚡ Mask Transition
// Mask transition
RouteShifterBuilder()
.mask(
shape: MaskShape.circle,
alignment: Alignment.center,
)
⚡ Clip Path
// Custom clip transition
RouteShifterBuilder()
.clipPath(
clipper: CustomClipPath(),
duration: Duration(milliseconds: 700),
)
🔹 Platform Presets #
📱 Material Design
// Material 3 preset
RouteShifterBuilder()
.materialPreset(MaterialTransition.slideUp)
// Available Material presets:
// - MaterialTransition.slideUp
// - MaterialTransition.fadeThrough
// - MaterialTransition.sharedAxis
// - MaterialTransition.container
🍎 Cupertino (iOS)
// iOS-style preset
RouteShifterBuilder()
.cupertinoPreset(CupertinoTransition.rightToLeft)
// Available Cupertino presets:
// - CupertinoTransition.rightToLeft
// - CupertinoTransition.bottomToTop
// - CupertinoTransition.modalPresent
// - CupertinoTransition.pageReplace
🍎 Cupertino Modal
// iOS modal presentation
RouteShifterBuilder()
.cupertinoModal(
presentationStyle: ModalPresentationStyle.pageSheet,
duration: Duration(milliseconds: 400),
)
🔹 Effect Combinations #
🔗 Popular Combinations
// Slide + Fade
RouteShifterBuilder()
.slideAndFade(
slideBegin: Offset(1.0, 0.0),
fadeBegin: 0.0,
)
// Scale + Fade
RouteShifterBuilder()
.scaleAndFade(
scaleBegin: 0.8,
fadeBegin: 0.0,
)
// Rotation + Scale
RouteShifterBuilder()
.rotationAndScale(
rotationBegin: -0.5,
scaleBegin: 0.0,
)
// Complex combination
RouteShifterBuilder()
.complexTransition(
slideBegin: Offset(0.0, 1.0),
scaleBegin: 0.8,
fadeBegin: 0.0,
rotationBegin: 0.1,
)
🔧 Advanced Usage #
Chaining Multiple Effects #
// Chain multiple effects together
final route = RouteShifterBuilder()
.fade(duration: Duration(milliseconds: 200))
.slide(beginOffset: Offset(1.0, 0.0))
.scale(beginScale: 0.8)
.rotation(beginAngle: 0.1)
.toRoute(page: NextPage());
Navigator.of(context).push(route);
Custom Timing and Curves #
RouteShifterBuilder()
.fade(
duration: Duration(milliseconds: 800),
curve: Curves.elasticOut,
)
.slide(
duration: Duration(milliseconds: 600),
curve: Curves.fastOutSlowIn,
)
Interactive Dismiss Gestures #
RouteShifterBuilder()
.fade()
.slide()
.enableDismissGesture(
direction: DismissDirection.horizontal,
sensitivity: 0.3,
)
Additional Effects #
Click to see more effects
// Blur transitions
RouteShifterBuilder()
.blur(
beginSigma: 10.0,
endSigma: 0.0,
duration: Duration(milliseconds: 600),
)
// Parallax effect
RouteShifterBuilder()
.parallax(
offset: Offset(0.0, 0.5),
intensity: 0.7,
)
// Follow path animation
RouteShifterBuilder()
.followPath(
path: customPath,
duration: Duration(milliseconds: 1000),
)
// Spring physics
RouteShifterBuilder()
.spring(
mass: 1.0,
stiffness: 100.0,
damping: 10.0,
)
🎯 Performance Tips #
- ✅ Use
constconstructors where possible - ✅ Prefer shorter animation durations for better UX (200-400ms)
- ✅ Combine related effects rather than chaining many separate ones
- ✅ Use
builderpatterns for complex animations - ✅ Test on lower-end devices to ensure smooth performance
📱 Platform Support #
| Platform | Version | Status |
|---|---|---|
| 🤖 Android | API 16+ | ✅ Fully Supported |
| 🍎 iOS | 9.0+ | ✅ Fully Supported |
| 🌐 Web | Modern Browsers | ✅ Fully Supported |
| 🖥️ macOS | 10.11+ | ✅ Fully Supported |
| 🪟 Windows | 7+ | ✅ Fully Supported |
| 🐧 Linux | All Distros | ✅ Fully Supported |
🤝 Contributing #
We welcome contributions! Here's how you can help:
- 🐛 Report Bugs - Found an issue? Create an issue
- 💡 Suggest Features - Have an idea? We'd love to hear it!
- 📝 Improve Documentation - Help make our docs better
- 🔧 Submit Pull Requests - Read our Contributing Guide
📄 License #
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments #
- 💙 Flutter Team - For the incredible framework
- 🌟 Community Contributors - Thank you for your support and feedback
- 🎨 Design Inspiration - Various animation libraries and design systems
Made with ❤️ for the Flutter community
Metadata
19
likes
0
points
30
downloads
Publisher
Weekly Downloads
Metadata
A powerful, declarative route transition package with 34+ chainable animations, shared elements, and advanced effects for Flutter applications.
Repository (GitHub)
View/report issues
Topics
#animation #transitions #navigation #flutter #material-design
Documentation
License
unknown (license)
