Sobes.tech
Middle

Fale-me sobre animação no Flutter.

sobes.tech IA

Resposta da IA

No Flutter, as animações dividem-se em dois tipos principais: implícitas e explícitas.

  • Animações implícitas são animações simples que gerenciam automaticamente as mudanças de estado do widget. Por exemplo, AnimatedContainer altera suavemente os seus parâmetros (cor, tamanho) ao modificar as suas propriedades sem necessidade de escrever controladores de animação.

  • Animações explícitas oferecem controlo total sobre o processo de animação. Para isso, usa-se AnimationController, que controla o tempo e o progresso da animação. Com Tween e Animation, pode-se definir como os valores mudam ao longo do tempo.

Exemplo de animação implícita:

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

Exemplo de animação 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();
  }
}

Assim, o Flutter fornece ferramentas poderosas para criar animações suaves e responsivas que melhoram a experiência do utilizador.