Aleteo SDK proporciona a los desarrolladores un sistema de widget llamado AnimatedContainer . Como su nombre indica, es un contenedor que se puede animar de alguna manera. Por lo tanto, sus atributos son como el widget Container habitual, excepto que siempre que haya un cambio en cualquiera de sus atributos, proporciona una forma fluida de transición al valor cambiado. He estado jugando con este widget durante algún tiempo y podría experimentar algunas animaciones que me gustaría compartir con ustedes más adelante en este artículo.

Antes de comenzar con AnimatedContainer, me gustaría mostrar el comportamiento de un widget Container para cambiar los valores y luego pasar a AnimatedContainer. Al hacerlo, podremos entender mejor lo que AnimatedContainer trae a la tabla lo que Container no.

vamos a cambiar el height y width atributos de la etiqueta Container en algún evento como hacer clic y ver cómo la transición aparece.

En este ejemplo vamos a cambiar el height y width nuestro Container al hacer clic en la etiqueta Container sí. Así que el árbol del widget va a ser simplemente un Container en el centro de la pantalla envuelto con un GestureDetector para detectar la haga clic en el Container con onTap devolución de llamada. El siguiente es el código para que:

Así que lo que estamos haciendo aquí es cambiar los valores de las variables containerHeight y containerWidth en el toque de Container . Vamos a ejecutar y ver el comportamiento de

ver la transición es abrupta en la naturaleza y no lúcido en todo!

Ahora intentemos lo mismo con AnimatedContainer y luego pasemos a probar animaciones más geniales con las mismas.

Comportamiento del contenedor animado

El código para esto es prácticamente el mismo que el anterior, excepto que necesitamos cambiar el widget de Containera AnimatedContainer. Después de cambiar el widget a AnimatedContainer, debe pasar el atributo Duration para AnimatedContainer. Especifica el período de tiempo o la duración durante la que desea completar el comportamiento de animación. Así que establece la propiedad Duration como a continuación:

Vamos a ejecutar el código actualizado y observar el comportamiento de este tiempo

Voilà !!!

Eso es mucho mejor de ver. Intentemos experimentar con más atributos.

Cambio de color:

A medida que aumenta el número de atributos que animamos , es mejor usar un booleano para saber en qué estado se encuentra el contenedor en este momento. Ya sea que esté expandido o no. El beneficio de hacerlo es que dentro de setState() tendremos menos atributos con los que lidiar. Cambiaremos el booleano y eso será todo.

Así que adelante y agregue una variable booleana:

bool isExpanded = false;

También actualice el widget AnimatedContainer en el árbol de widgets de la siguiente manera:

El cambio aquí es que hemos agregado un atributo color a AnimatedContainer y los otros dos atributos height y width se asignan valores en función de si el AnimatedContainer está expandido o no.

Se debe realizar un cambio final, es decir, actualizar el setState() de la siguiente manera:

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

Cambio en borderRadius:

al igual que otros atributos también podemos animar la frontera radio de la etiqueta AnimatedContainer en tiempo de ejecución. Para agregar la propiedad borderRadius, necesitaremos pasar BoxDecoration primero al atributo decoration y luego dentro del cual pasaremos el borderRadius. 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. Pero en este momento la animación es bastante ‘vainilla’, lo que significa que solo anima linealmente entre los dos valores. Qué tal jugar con la curva o el ritmo de la animación.

Agregar atributo de curva:

Mi curva favorita es Curves.bounceOut. Intentémoslo. También aumentemos un poco el duration.

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 :

Deja una respuesta

Tu dirección de correo electrónico no será publicada.