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
β Star us on GitHub | π¦ View on pub.flutter-io.cn | π Documentation
Metadata
17
likes
0
points
67
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)
