Sobes.tech
Junior — Middle

¿Puede hablar sobre las capacidades de implementar animaciones en Flutter y sus características?

sobes.tech AI

Respuesta de la IA

En Flutter, las animaciones se implementan mediante un marco de animación incorporado que permite crear transiciones suaves y personalizables. Las principales capacidades:

  • Animaciones implícitas — animaciones simples donde basta con cambiar la propiedad del widget, por ejemplo, AnimatedContainer, AnimatedOpacity. Estas animaciones se animan automáticamente.
  • Animaciones explícitas — más flexibles, requieren un controlador de animación (AnimationController), permiten gestionar el tiempo, las curvas y los estados de la animación.
  • Tween — define el rango de valores para la animación (por ejemplo, de 0 a 1).
  • AnimationController — controla el tiempo de la animación, puede iniciarla, detenerla, repetirla.
  • CurvedAnimation — permite definir una curva de cambio (ease-in, ease-out, etc.).

Ejemplo de animación explícita de cambio de tamaño:

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 100, end: 200).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );
    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Container(
          width: _animation.value,
          height: _animation.value,
          color: Colors.blue,
        );
      },
    );
  }
}

Características:

  • Alto rendimiento gracias al renderizado a nivel del motor.
  • Capacidad de combinar animaciones.
  • Soporte para gestos y animaciones interactivas.
  • Buena integración con widgets de Flutter.