Um dos recursos mais incríveis do Flutter é como você tem controle em uma animação. Com Flutter você decide o que quer fazer com ela  e hoje veremos  como podemos usar isso, quais opções temos na hora de criar animações em Flutter e qual a diferença entre animação controlada e implícita.

Animações em Flutter Controladas

Quando você começa a se aprofundar em Flutter, se depara com alguns controladores ou Controllers. Eles servem para você, através de eventos, conseguir controlar algum recurso, como um campo de texto ou um formulário. Esse controlador disponibiliza um sistema de observação a eventos e, então, nos permite tomar decisões a partir disso.

Para animações controladas, a mesma ideia se repete, com um controlador podemos mandar a animação acontecer, pausar ela, reverter de acordo com a necessidade.

Para fazer uma animação controlada, você precisa configurar e definir  muita coisa, gerando assim códigos repetidos caso você não queria uma animação específica, por exemplo, para criar uma animação assim.

Precisamos ter os seguinte código, se caso quisermos usar a animação controlada:

Linha 43: Primeiro, para começarmos a configurar uma animação controlada, devemos definir nossa Stateful Widget como um TickerProviderStateMixin, isso faz com que possamos avisar para o Flutter que iremos animar esse Widget e possamos passar esse elemento na linha 51

Linha 49: Aqui criamos nosso controller, avisando que o value (valor inicial) será 100. O elemento que iremos animar é o próprio Widget passando o mesmo no vsync; o valor mínimo (lowerBound) será 100 também; o valor máximo (upperBound) será 300 e, por fim, a duração (duration) será 300 milissegundos.

Linha 56: Nesse ponto  configuramos os observadores de eventos e o que iremos fazer com isso. No caso, apenas vamos pegar o valor atual da animação e transferir para a variável value, que será usada para definir o tamanho do nosso componente nas linhas 77 e 78, e então iremos atualizar o estado da aplicação usando SetState, mandando o Flutter desenhar o Widget novamente.

Linha 64: Temos aqui a função que irá chamar nosso controlador e irá animar o nosso componente. Essa função é chamada pelo nosso FloatingActionButton, na linha 83.

Como podemos ver, a animação controlada é eficaz, porém com muito código para lidar.   Uma alternativa seria utilizar componentes prontos para animações simples como mudança de tamanho ou cor - e é aí que entra as animações implícitas.

Animações em Flutter Implícitas

Para facilitar a vida, o Flutter possui uma série de Widgets que se animam a cada mudança, facilitando muito o nosso código. É importante saber como criar animações do zero, como vimos acima, principalmente se sua animação for muito específica. Porém, não dá pra perder tempo com animações simples. Conseguimos o mesmo resultado do exemplo anterior com um Widget chamado AnimatedContainer. Veja.

Assim, nós não precisamos do mixin TickerProviderStateMixin, nem configurar um controller ou os listeners, diminuindo drasticamente a quantidade de código.

O AnimatedContainer fica ouvindo toda mudança de configuração do container, então se alterarmos cor, tamanho, opacidade, borda e qualquer outra configuração do container, ele irá ativar a animação para transformar o container.

Um exemplo é a mudança de cor. E ainda podemos juntar as duas coisas ficando assim.

Outro Widget que podemos utilizar é o AnimatedOpacity que anima a mudança de opacidade de um elemento.

Temos vários desses Widgets que podem nos auxiliar e você pode encontrá-los na documentação oficial.

Mas, ainda falta alguma coisa para deixar essa animação mais fluida, já que parece que ela é linear e ‘seca’. Para mudarmos a forma em que a animação é apresentada usamos o Curve.

Curve

Em toda animação, um recurso chamado Curve é usado para dizer como a animação irá se portar, ou seja, como ela irá ocorrer. Nas animações anteriores você pode perceber que ela ocorre de uma forma linear, ou seja, constante até o final, porém ela não é a melhor opção para deixar seu app mais fluido, por exemplo:

Qual das caixas você percebe que é mais rápida?

Você pode pensar que é a caixa verde, porém as duas duram a mesma quantidade de tempo. Mudando a forma com que a animação se comporta, podemos trazer algo mais fluido. Vale conhecer todas as opções que temos com o Curve para escolhermos melhor como apresentar uma animação. Na documentação oficial temos cada opção com seu exemplo.

Para usar o Curve, basta adicionar nos parâmetros da sua animação:

Sendo assim, seguindo nosso primeiro exemplo, colocando um Curve mais fluido, podemos ver uma grande diferença.

Sendo o vermelho nosso exemplo anterior e o verde com Curve implementado.

Conclusão

Sendo animações complexas e únicas ou animações simples e comuns, o Flutter oferece recursos para darmos o diferencial para o nosso app. Em poucas linhas de código podemos criar animações fluidas e agradar os olhos de quem usa. Uma animação pode fazer muita diferença dentro da experiência do usuário e, com Flutter, conseguimos ter a facilidade de usar com poucas linhas de código.

Dentro da animação controlada ainda há alguns assuntos como Tween, porém só com o que tratamos hoje você tem o poder criar animações para seu aplicativo.