Open
Description
What feature would you like to see?
Hello,
I want to achieve this kind of entry animation for my bottom sheet:
https://raw.githubusercontent.com/mcrovero/rubber/master/assets/video1.gif
I have overridden the buildTransition
but still doesn't see the effect:
class RubberBandCurve extends Curve {
final double elasticity; // Higher = more stretchy
const RubberBandCurve({this.elasticity = 0.5});
@override
double transform(double t) {
// Base ease out function
double easeOut = 1.0 - pow(1.0 - t, 2).toDouble();
// Add oscillation with decreasing amplitude
if (t > 0.9) return 1.0; // Stabilize at the end
// Overshoot calculation: adds oscillation with decreasing amplitude
double oscillation =
-elasticity * sin((t * pi) * (1 + 1.5 * t)) * pow(1 - t, 2).toDouble();
return easeOut + oscillation;
}
}
overridden buildTransition
:
@override
Widget buildTransitions(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
// Apply custom rubber band curve
final rubberAnimation = CurvedAnimation(
parent: animation,
curve: RubberBandCurve(elasticity: 0.5),
);
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0.0, 1.0),
end: Offset.zero,
).animate(rubberAnimation),
child: child,
);
}