Sobes.tech
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.

Tell us about animation in Flutter. — Flutter - sobes.tech