Middle
Tell us about animation in Flutter.
sobes.tech AI
Answer from AI
In Flutter, animations are divided into two main types: implicit and explicit.
-
Implicit animations are simple animations that automatically manage widget state changes. For example, AnimatedContainer smoothly changes its parameters (color, size) when properties change without the need to write animation controllers.
-
Explicit animations give full control over the animation process. They use AnimationController, which manages the timing and progress of the animation. With Tween and Animation, you can specify how values change over time.
Example of an implicit animation:
AnimatedContainer(
duration: Duration(seconds: 1),
width: _selected ? 200 : 100,
height: _selected ? 200 : 100,
color: _selected ? Colors.blue : Colors.red,
child: ...,
)
Example of an explicit animation:
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();
}
}
Thus, Flutter provides powerful tools for creating smooth and responsive animations that enhance user experience.