Implícitas

Para mostrar o quão simples é criar uma animação com Flutter, vamos direto para o código:

Vamos criar nosso "ContainerDesanimado":

Container(
  width: 150, height: 150,
  color: cor //variável para armazenar a cor 
)

Ao clicarmos no botão, a nova cor passa a ser amarelo.

info

O método setState é invocado e a variável cor recebe o novo valor.

Sem graça, não é? Vamos animá-lo! Para isso, é só substituir o Container por um AnimatedContainer:

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: 150, height: 150,
  color: cor
)

Só precisamos adicionar o parametro duration, para indicar quanto em tempo a mudança de cor irá acontecer. Neste caso, 1 segundo.

Muito simples, certo ?! E o melhor de tudo é que o Flutter já nos oferece vários widgets "Animated":

Alinhamento: AnimatedAlign

Opacidade: AnimatedOpacity

Padding: AnimatedPadding

Escala: AnimatedScale

Todos os widgets animated derivam de um ImplicityAnimatedWidget. Nela, é possível ver todos os widgets disponíveis (ou seja, widget que implementam esta classe).

Percebeu que o Flutter se encarregou de executar a animação, após invocarmos o setState() ? Tivemos pouco ou nenhum controle sobre ela, apenas delegamos a tarefa de animar o container da cor vermelha para amarela.

A facilidade de implementar este tipo de animação, justifica a ausência de controle. É possível melhorar a experiência do usuário com widgets animados em poucas linhas de código, como vimos acima.

E mesmo que precise controlar cada detalhe de uma animação, temos as animações explícitas disponíveis.

Confira este vídeo: