Flutter SDK fornece aos desenvolvedores uma inerente elemento chamado AnimatedContainer . Como o nome sugere, é um recipiente que pode ser animado de alguma forma. Assim, seus atributos são exatamente como o usualContainer widget exceto que sempre que há uma mudança em qualquer de seus atributos, ele fornece uma forma contínua de transição para o valor alterado. Eu fui brincar com este widget por algum tempo agora e poderia experimentar algumas animações que eu gostaria de compartilhar com você mais tarde neste artigo.

Antes de realmente começar com AnimatedContainer, eu gostaria de mostrar o comportamento de um costume Container widget de mudança de valores e, em seguida, mover para AnimatedContainer. Ao fazê-lo, seremos capazes de entender melhor o que AnimatedContainer traz para a tabela que Container não traz.

Vamos mudar o height e width atributos de Container em alguns eventos como clique e veja como a transição aparece.

neste exemplo, nós estamos indo para alterar o height e width nossa Container clicando sobre o Container si. Assim, o widget árvore vai ser simplesmente um Container no centro do ecrã, envolto com uma GestureDetector para detectar o mouse sobre o Container uso de onTap chamada de retorno. A seguir está o código para isso:

Então, o que estamos aqui a fazer é alterar os valores das variáveis containerHeight e containerWidth no toque de Container . Vamos rodar e ver o comportamento

Você vê a transição é abrupta na natureza e não lúcido em tudo!

Agora, vamos tentar a mesma coisa com AnimatedContainer e, em seguida, mover para tentar mais legal animações com o mesmo.

comportamento animado do contentor

o código para isto é praticamente o mesmo que o anterior, excepto que precisamos de mudar o elemento de Container para AnimatedContainer. Depois de mudar o elemento para AnimatedContainer, é necessário passar o atributo Duration para o atributo AnimatedContainer. Isto indica o período de tempo ou a duração durante a qual deseja que o comportamento de animação seja completado. Então defina a propriedade Duration como abaixo:

Vamos executar o código atualizado e observar o comportamento desta vez

Pronto !!!

que é muito melhor de ver. Vamos tentar experimentar com mais atributos.

mudança de cor:

como o número de atributos que estamos animando estão aumentando , é melhor usar um booleano para saber o estado do recipiente no momento. Quer seja expandido ou não. O benefício de fazê-lo é que dentro de setState() teremos menos atributos para lidar. Vamos só ligar o booleano e pronto.

Por isso, vá em frente e adicione uma variável booleana:

bool isExpanded = false;

também actualize o elemento AnimatedContainer :

A mudança aqui é que adicionamos um color atributo AnimatedContainer e os outros dois atributos de height e width valores são atribuídos com base em se o AnimatedContainer é expandido ou não.é necessário efectuar uma última alteração, ou seja, actualizar o setState() da seguinte forma::

setState((){
isExpanded = !isExpanded;
});

Alterar em borderRadius:

assim como outros atributos que também pode animar a fronteira raio de AnimatedContainer em tempo de execução. Para adicionar o borderRadius propriedade, nós vamos precisar passar BoxDecoration primeiro decoration atributo e, em seguida, no interior do qual nós vamos passar o borderRadius para ele. Just like how you’d set borderRadius for usual Container.

Notice that I’ve moved the color attribute inside BoxDecoration because we can’t specify color and decoration at the same time, just like Container.

This looks great so far. Mas agora a animação é bastante ‘vanilla’, o que significa que apenas anima linearmente entre os dois valores. Que tal brincar com a curva ou o ritmo da animação?

adicionando o atributo”curva”:

a minha curva favorita é Curves.bounceOut. Vamos tentar isso. Também vamos aumentar o duration a bit.

duration: Duration(
milliseconds: 1000,
),
curve: Curves.bounceOut,

As an excercise, I suggest you to also try out other curves.

Similarly, you can also experiment with other parameters of AnimatedContainer like transformmarginpadding etc. You can create complex animations when you combine multiple attributes together. I won’t be explaining these animations in this article for brevity but this is what I was able to achieve :

Deixe uma resposta

O seu endereço de email não será publicado.