Sobes.tech
Middle

Háblame de la animación en Flutter.

sobes.tech AI

Respuesta de la IA

En Flutter, las animaciones se dividen en dos tipos principales: implícitas y explícitas.

  • Animaciones implícitas son animaciones simples que gestionan automáticamente los cambios en el estado del widget. Por ejemplo, AnimatedContainer cambia suavemente sus parámetros (color, tamaño) al modificar sus propiedades sin necesidad de escribir controladores de animación.

  • Animaciones explícitas ofrecen control total sobre el proceso de animación. Para ellas se usa AnimationController, que controla el tiempo y el progreso de la animación. Con Tween y Animation, se puede definir cómo cambian los valores en el tiempo.

Ejemplo de animación implícita:

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: _selected ? 200 : 100,
  height: _selected ? 200 : 100,
  color: _selected ? Colors.blue : Colors.red,
  child: ...,
)

Ejemplo de animación explícita:

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(vsync: this, duration: Duration(seconds: 2));
    _animation = Tween<double>(begin: 0, end: 300).animate(_controller);
    _controller.forward();
  }

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

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

De esta manera, Flutter ofrece potentes herramientas para crear animaciones suaves y receptivas que mejoran la experiencia del usuario.