Los mejores paquetes de animación para Flutter en 2026 (widget o activo)
Flutter divide la animación en dos trabajos. La animación de widget mueve y estiliza cosas que construyes en Dart. La animación de activos reproduce movimiento creado por diseño en otra herramienta. La mayoría de apps necesita ambas, y confundirlas es la razón por la que se añaden paquetes que no se usan.
Hacemos ExodeUI, que aparece aquí porque ofrece un runtime de Flutter. Decimos cuándo otro paquete es mejor.
Para animación declarativa de widgets, flutter_animate cubre la mayoría de efectos pequeños con poco código, y las opciones integradas del framework bastan para transiciones estándar. Para movimiento diseñado, Rive maneja máquinas de estados interactivas y Lottie reproduce arte de After Effects. animate_do es una opción más ligera si solo quieres efectos de entrada predefinidos.
Elección rápida según tu necesidad
| Si necesitas | Usa |
|---|---|
| Efectos declarativos de widget en Dart | flutter_animate |
| Movimiento diseñado e interactivo con estados | Rive |
| Reproducir arte de After Effects | Lottie |
| Transiciones estándar sin paquete | Flutter built-ins |
| Efectos de entrada predefinidos | animate_do |
Cómo los comparamos
- Si la animación pertenece a Dart o a un activo diseñado
- Cuánto control deja el paquete sobre interrupción y estado
- Qué tiene que mantener el equipo tras el lanzamiento
Las 5 opciones que vale la pena probar
1. flutter_animate
Ideal para: Añadir animaciones pequeñas de widget sin controlador
- Plataformas
- Flutter
- Precio
- Gratis; revisa la licencia actual
- Salida
- Código Dart dentro de la app
Un paquete que permite encadenar efectos sobre un widget con una sintaxis compacta. Es cómodo para entradas, fundidos y pequeños retrasos, y mantiene la animación cerca del código del widget.
Ventajas e inconvenientes
- Cadenas legibles para efectos habituales
- Menos código repetitivo que con controladores manuales
- Bueno para entradas escalonadas
- La coreografía compleja sigue necesitando controladores explícitos
- La animación vive en Dart, así que diseño no puede editarla
2. Rive
Ideal para: Movimiento diseñado e interactivo con máquinas de estados
- Plataformas
- Runtime de Flutter; editor en navegador y escritorio
- Precio
- Plan gratis; planes de pago disponibles
- Salida
- Un activo Rive reproducido por el runtime de Flutter
Permite que diseño construya estados y transiciones en un editor visual y los controle desde Dart. Bueno para mascotas, controles ilustrados y movimiento que debe responder al estado de la app.
Ventajas e inconvenientes
- Diseño es dueño de la animación
- Las máquinas de estados hacen práctica la interacción
- Un activo reutilizable en otras plataformas
- Añade una dependencia de runtime y archivos de activos
- El formato de archivo es propietario
3. Lottie
Ideal para: Reproducir arte de After Effects en la app
- Plataformas
- Paquete de Flutter; arte desde After Effects
- Precio
- Paquete gratis; revisa la licencia actual
- Salida
- JSON de Lottie reproducido por el paquete
Reproduce archivos Lottie exportados desde After Effects. Es el camino habitual cuando diseño ya trabaja en After Effects y la animación solo tiene que reproducirse.
Ventajas e inconvenientes
- Biblioteca muy grande de animaciones existentes
- Flujo familiar para usuarios de After Effects
- Funciona bien en ilustraciones y arte de onboarding
- Lógica de estado limitada frente a una máquina de estados
- Los archivos complejos pueden pesar si no se optimizan
4. Flutter built-in animations
Ideal para: Transiciones estándar y cambios simples de propiedades
- Plataformas
- Flutter
- Precio
- Incluido en el framework
- Salida
- Código Dart dentro de la app
Las animaciones implícitas como AnimatedContainer y los controladores explícitos cubren buena parte del movimiento de interfaz. Recurrir a un paquete antes de estas es una forma común de añadir dependencias sin necesidad.
Ventajas e inconvenientes
- Sin dependencia extra
- Bien documentadas en el framework
- Control fino cuando hace falta
- Más código repetitivo para secuencias complejas
- Sin creación visual para diseño
5. animate_do
Ideal para: Efectos de entrada y atención predefinidos
- Plataformas
- Flutter
- Precio
- Gratis; revisa la licencia actual
- Salida
- Código Dart dentro de la app
Un paquete pequeño de efectos listos, útil cuando quieres un fundido o un deslizamiento sin escribir la animación. Es una capa de comodidad, no un sistema para interacción compleja.
Ventajas e inconvenientes
- Rápido para añadir efectos simples
- Muy poco código en la llamada
- Cubre entradas habituales
- Los efectos parecen genéricos sin personalizar
- Control limitado para la interrupción
Ya has leído la lista. Lo que nosotros hacemos está a un clic.
Plan Community gratuito. Un solo archivo .exode abierto que funciona en React, Vue, Svelte, Angular, Solid, React Native, SwiftUI y Flutter.
También vale la pena
Animación de widget frente a animación de activos
La de widget se escribe en Dart y reacciona al árbol de widgets: una tarjeta que se expande, una lista que se reordena, un botón que cambia de estado. La de activos se crea en una herramienta de diseño y la reproduce un runtime. La primera es más fácil de mantener coherente con la app; la segunda es más fácil de poseer por diseño y de reutilizar entre plataformas.
Cómo elegir sin añadir tres paquetes
Empieza por las opciones integradas del framework. Añade flutter_animate si el código repetitivo frena al equipo. Añade Rive o Lottie solo cuando diseño deba ser dueño del movimiento, y elige uno de los dos para no enviar dos runtimes para el mismo trabajo. Prueba en un Android de gama baja, que es donde suele decidirse la calidad de la animación.