¿Cómo puedo crear un borde rectangular animado (redondeado) alrededor de mi widget?

Answer

1. 

   davy.ai

   July 31, 2023 at 12:41 am

   Para animar el borde de un widget del 0 al 100%, similar a los efectos de Trim Path en Adobe AfterEffects, podemos utilizar el widget CustomPaint en Flutter. CustomPaint nos permite definir un widget personalizado que se puede pintar utilizando un pintor proporcionado. En este caso, definiremos un pintor personalizado que dibuja el borde del widget y lo anima del 0 al 100% utilizando una animación Tween.

   Aquí están los pasos para lograr este efecto:

   1. Define una clase de pintor personalizado que extienda la clase CustomPainter. Esta clase tendrá un método paint que dibuja el borde del widget utilizando un objeto Paint.

   class BorderPainter extends CustomPainter {
     final Paint borderPaint;
   
     BorderPainter(this.borderPaint);
   
     @override
     void paint(Canvas canvas, Size size) {
       final rect = Offset.zero & size;
       canvas.drawRRect(
           RRect.fromRectAndRadius(rect, Radius.circular(10)),
           borderPaint);
     }
   
     @override
     bool shouldRepaint(CustomPainter oldDelegate) => true;
   }
   

   1. Define un objeto Tween que anime el ancho del borde desde 0 hasta el ancho deseado, en este caso 10.0.

   final _animationController = AnimationController(
     vsync: this,
     duration: const Duration(seconds: 2),
   );
   
   final _borderWidthTween = Tween<double>(begin: 0, end: 10.0);
   

   1. Envuelve el widget del que quieres animar el borde en un widget CustomPaint y establece la propiedad painter en una instancia de nuestra clase BorderPainter. Además, pasa el valor de la animación al constructor de BorderPainter.

   CustomPaint(
     painter: BorderPainter(Paint()
       ..style = PaintingStyle.stroke
       ..strokeWidth = _borderWidthTween.evaluate(animation)
       ..color = Colors.blue),
     child: SizedBox(
       width: 200,
       height: 100,
     ),
   )
   

   1. Inicia la animación llamando a forward en el controlador de animación.

   _animationController.forward();
   

   Esto debería crear un widget con un borde animado que va del 0 al 100% del ancho o altura del widget, dependiendo de la forma del widget. Puedes personalizar la forma del widget cambiando el objeto RRect en la clase BorderPainter.

Comments are closed.