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.