Sobes.tech
Junior — Middle

Pode falar sobre as capacidades de implementação de animações no Flutter e suas características?

sobes.tech IA

Resposta da IA

No Flutter, as animações são implementadas usando um framework de animação incorporado que permite criar transições suaves e personalizáveis. As principais funcionalidades:

  • Animações implícitas — animações simples onde basta alterar a propriedade do widget, por exemplo, AnimatedContainer, AnimatedOpacity. Elas animam-se automaticamente.
  • Animações explícitas — mais flexíveis, requerem um controlador de animação (AnimationController), permitindo gerir o tempo, as curvas e os estados da animação.
  • Tween — define o intervalo de valores para a animação (por exemplo, de 0 a 1).
  • AnimationController — controla o tempo da animação, podendo iniciá-la, pará-la, repeti-la.
  • CurvedAnimation — permite definir uma curva de alteração (ease-in, ease-out, etc.).

Exemplo de animação explícita de mudança de tamanho:

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(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 100, end: 200).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );
    _controller.repeat(reverse: true);
  }

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

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

Características:

  • Alto desempenho graças ao rendering ao nível do motor.
  • Capacidade de combinar animações.
  • Suporte para gestos e animações interativas.
  • Boa integração com widgets Flutter.