You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.7 KiB
75 lines
2.7 KiB
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,
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|