parent
ffd1ac5ddc
commit
9743f9a8ec
@ -0,0 +1,74 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Material Design 3 easing curves
|
||||
/// Reference: https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration
|
||||
class Material3Easing {
|
||||
/// Standard easing curve for entering animations
|
||||
/// Cubic(0.2, 0, 0, 1)
|
||||
static const Curve standardEnter = Cubic(0.2, 0, 0, 1);
|
||||
|
||||
/// Standard easing curve for exiting animations
|
||||
/// Cubic(0, 0, 0.2, 1)
|
||||
static const Curve standardExit = Cubic(0, 0, 0.2, 1);
|
||||
|
||||
/// Emphasized easing curve for entering animations
|
||||
/// Cubic(0.2, 0, 0, 1)
|
||||
static const Curve emphasizedEnter = Cubic(0.2, 0, 0, 1);
|
||||
|
||||
/// Emphasized easing curve for exiting animations
|
||||
/// Cubic(0.05, 0.7, 0.1, 1)
|
||||
static const Curve emphasizedExit = Cubic(0.05, 0.7, 0.1, 1);
|
||||
}
|
||||
|
||||
/// Material Design 3 page route with custom easing animations.
|
||||
///
|
||||
/// Uses Material Design 3 motion guidelines for smooth, fluid transitions.
|
||||
/// Reference: https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration
|
||||
class Material3PageRoute<T> extends PageRouteBuilder<T> {
|
||||
final Widget child;
|
||||
final bool useEmphasized;
|
||||
|
||||
Material3PageRoute({
|
||||
required this.child,
|
||||
this.useEmphasized = false,
|
||||
RouteSettings? settings,
|
||||
}) : super(
|
||||
pageBuilder: (context, animation, secondaryAnimation) => child,
|
||||
transitionDuration: useEmphasized
|
||||
? const Duration(milliseconds: 400)
|
||||
: const Duration(milliseconds: 300),
|
||||
reverseTransitionDuration: useEmphasized
|
||||
? const Duration(milliseconds: 400)
|
||||
: const Duration(milliseconds: 300),
|
||||
settings: settings,
|
||||
transitionsBuilder: (context, animation, secondaryAnimation, child) {
|
||||
// Use Material Design 3 easing curves
|
||||
final enterCurve = useEmphasized
|
||||
? Material3Easing.emphasizedEnter
|
||||
: Material3Easing.standardEnter;
|
||||
final exitCurve = useEmphasized
|
||||
? Material3Easing.emphasizedExit
|
||||
: Material3Easing.standardExit;
|
||||
|
||||
// Apply easing curves to animations
|
||||
final curvedAnimation = CurvedAnimation(
|
||||
parent: animation,
|
||||
curve: enterCurve,
|
||||
reverseCurve: exitCurve,
|
||||
);
|
||||
|
||||
// Slide transition with fade
|
||||
return SlideTransition(
|
||||
position: Tween<Offset>(
|
||||
begin: const Offset(0.0, 0.05), // Slight upward slide
|
||||
end: Offset.zero,
|
||||
).animate(curvedAnimation),
|
||||
child: FadeTransition(
|
||||
opacity: curvedAnimation,
|
||||
child: child,
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue