Las animaciones marcan la diferencia entre una app funcional y una app memorable. Aprender a crear animaciones personalizadas en Flutter te permite controlar duración, escala, color y curvas para que tu botón de favoritos no solo funcione, sino que se sienta vivo.

A continuación verás cómo pasar del widget AnimatedSwitcher que viene listo en Flutter a una animación totalmente personalizada con AnimationController, Tween y CurvedAnimation.

¿Cómo animar un ícono de favoritos con AnimatedSwitcher?

La forma más rápida de animar un cambio en Flutter es envolver tu widget en un AnimatedSwitcher. Es ideal cuando quieres que un ícono cambie con una transición suave sin escribir mucho código [0:15].

Los pasos clave son sencillos:

• Envuelve tu Icon dentro del widget AnimatedSwitcher.
• Define una duration corta, en este caso 300 milisegundos.
• Usa la propiedad transitionBuilder para retornar un ScaleTransition que recibe child y animation.
• Pasa tu ícono como child para que sea el widget animado.

Para que la transición se dispare cuando cambia el estado, agrega una ValueKey booleana basada en isFavorite. Así Flutter sabe que el widget cambió y ejecuta la animación. Si además quieres que el corazón se pinte de rojo al marcarlo, ajusta la propiedad color del ícono según el mismo isFavorite [1:20].

¿Qué hace AnimatedSwitcher en Flutter? Es un widget que anima la transición entre dos versiones de un mismo hijo cuando su key cambia. Necesita una duración y un transitionBuilder para definir el efecto visual.

¿Cómo personalizar animaciones con AnimationController y Tween?

Cuando el AnimatedSwitcher se queda corto, das el salto a animaciones personalizadas. Aquí controlas el inicio, el final y todo lo que ocurre en medio.

¿Qué es SingleTickerProviderStateMixin y por qué lo necesitas?

Lo primero es agregar with SingleTickerProviderStateMixin a tu clase de estado. Este mixin conecta tu animación con el ciclo de vida de la app y le dice al motor cuándo iniciar y cuándo detener cada frame [3:05]. Sin él, tu AnimationController no sabe dónde anclarse.

Luego declaras dos variables que configurarás más adelante:

• Un AnimationController llamado controller.
• Una Animation<double> que representará la escala del ícono.

¿Cómo configurar initState para iniciar la animación?

La configuración va dentro de un override de initState, la función que se ejecuta una sola vez al crear el widget [4:10]. Ahí defines tres piezas que trabajan en conjunto:

1. El AnimationController con un duration de 300 milisegundos, que marca cuánto dura el efecto completo.
2. Un Tween<double> que define los valores inicial y final de la escala. Tween es la abreviación de in between y controla qué pasa entre el punto A y el punto B [5:30].
3. Un CurvedAnimation aplicado con .animate(), donde el parent es tu controller y la curve es por ejemplo Curves.easeInOut, responsable de ese rebote suave que da sensación de vida.

¿Para qué sirve un Tween en Flutter? Define el rango de valores que interpolará la animación, por ejemplo de 1.0 a 1.5 para una escala. El controller se encarga del tiempo y el Tween de los valores intermedios.

¿Cómo encadenar el efecto y liberar recursos?

Una animación personalizada no termina con declararla. Necesitas decirle qué hacer cuando completa su recorrido y cómo limpiarse cuando el widget desaparece.

¿Cómo invertir la animación al completarse?

Dentro de initState, agrega un listener con addStatusListener que escuche el AnimationStatus. Cuando el estado sea completed, le pides al controller que ejecute reverse(), de modo que el ícono pase de pequeño a grande y luego de grande a pequeño automáticamente [7:40]. Ese ida y vuelta es lo que produce el latido visual del corazón.

¿Por qué hacer override de dispose?

Las animaciones consumen recursos mientras escuchan el ciclo de vida. Por eso debes hacer un override del método dispose y llamar a controller.dispose() para liberar memoria cuando el widget se elimina del árbol [8:30].

Finalmente, reemplaza el AnimatedSwitcher por un ScaleTransition que use tu animación personalizada como propiedad scale y deja tu ícono como child. Al guardar verás el efecto exacto que diseñaste: duración propia, curva propia y comportamiento controlado.

Ahora tienes la base para llevar tus animaciones más lejos. Cambia el color, ajusta el rango del Tween, prueba curvas como Curves.bounceOut o Curves.elasticIn y comparte en los comentarios qué efecto creaste para tu botón de favoritos.