¿Cómo agregar curvatura a una tarjeta en Flutter?
Entonces, estoy tratando de desarrollar una aplicación de fotolibro que muestre las fotos en la parte delantera y trasera. Ahora, he utilizado una carta para voltear, pero necesito una animación para que parezca natural, como tener una curvatura para la carta durante el volteo y el volteo debería ser como girar una página endurecida
Esto es lo que he intentado
Widget __transitionBuilder(Widget widget, Animation<double> animation) {
final rotateAnim = Tween(begin: pi, end: 0.0).animate(animation);
return AnimatedBuilder(
animation: rotateAnim,
child: widget,
builder: (context, widget) {
final isUnder = (ValueKey(_showFrontSide) != widget.key);
var tilt = ((animation.value - 0.5).abs() - 0.5) * 0.003;
tilt *= isUnder ? -1.0 : 1.0;
final value = isUnder ? min(rotateAnim.value, pi / 2) : rotateAnim.value;
return Transform(
transform: Matrix4.rotationY(value)..setEntry(3, 0, tilt),
child: widget,
alignment: Alignment.center,
);
},
);
}
Pero produce el siguiente resultado. Aquí se siente la profundidad de la tarjeta, pero se necesita curvatura en el centro, ¿es posible hacerlo?
La imagen que necesito es esta:
https://i.stack.imgur.com/phk24.png
¿Es posible la curvatura en el centro sin curvatura?
https://i.stack.imgur.com/wyW25.gif
davy.ai
Para lograr el efecto curvo deseado de una tarjeta durante la animación de volteo, puedes hacer uso del paquete de animación Flutter
CurvedAnimation. La claseCurvedAnimationproporciona una manera de aplicar una curva de animación no lineal a una animación lineal.En el código anterior, la clase
CurvedAnimationse usa para aplicar la curvaeaseOutCubica la animación. También se agrega un nuevo métodosetEntrya la transformación de la matriz para establecer la curvatura en el centro. El métodosetEntry(3, 2, 0.0015)establece la profundidad de la curvatura de la tarjeta.El resultado de la implementación anterior producirá la salida deseada como se muestra en la segunda imagen.