Animações

No Flutter, você pode criar animações de várias maneiras. Vou te mostrar um exemplo básico de animação usando o AnimationController e o AnimatedBuilder. Neste exemplo, vamos animar um contêiner (caixa) que muda de tamanho e cor quando um botão é pressionado. Primeiro, adicione a seguinte dependência ao seu arquivo pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter

Aqui está um exemplo básico de como fazer uma animação de tamanho e cor de um contêiner:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyAnimatedContainer(),
    );
  }
}

class MyAnimatedContainer extends StatefulWidget {
  @override
  _MyAnimatedContainerState createState() => _MyAnimatedContainerState();
}

class _MyAnimatedContainerState extends State<MyAnimatedContainer> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _sizeAnimation;
  Animation<Color> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );

    _sizeAnimation = Tween<double>(begin: 100, end: 200).animate(_controller);
    _colorAnimation = ColorTween(begin: Colors.blue, end: Colors.red).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Animation Example'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Container(
              width: _sizeAnimation.value,
              height: _sizeAnimation.value,
              color: _colorAnimation.value,
              child: Center(
                child: Text(
                  'Clique para animar!',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_controller.isCompleted) {
            _controller.reverse();
          } else {
            _controller.forward();
          }
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }

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

Neste exemplo, usamos um AnimationController para controlar a animação. O _sizeAnimation anima o tamanho do contêiner de 100 para 200, e o _colorAnimation anima a cor de azul para vermelho. O AnimatedBuilder é usado para reconstruir a interface do usuário sempre que a animação é atualizada.

O botão de ação flutuante (FloatingActionButton) inicia ou reverte a animação quando é pressionado. Certifique-se de chamar dispose() no AnimationController quando ele não for mais necessário para evitar vazamentos de memória.