Serie Flutter Animated: Containers Animados

Published in

Comunidad Flutter

4 min readJan 29, 2019

Fuente original: https://medium.com/flutter-community/flutter-animated-series-animated-containers-52a5d52c0ad3

Siempre quise trabajar con animaciones elegantes o locas. He trabajado con Android durante un par de años y estaba empezando a perder mi amor por las animaciones, porque tratar de desarrollarlas en Android fue una gran inversión de mi tiempo.

Enter Flutter!

Y me he enamorado de nuevo.

Para celebrar este nuevo amor, estoy empezando una serie de Animated para Flutter.

Sí, es una serie!

¡Voy a cubrir todo sobre la animación en Flutter desde animaciones implícitas hasta animaciones explícitas e incluso Flare! Este es el primero de la serie.

Containers Animados

Los Containers Animados son widgets animados implícitos.

Espere un segundo. Qué son widgets animados implícitos otra vez?

Bien, usualmente para lograr una animación en Flutter, tenemos que los objetos Animation y AnimationController para manejar las animaciones. Hay otras adicciones complejas como TickerProviderMixin. Usted tiene que comenzar manualmente la animación, terminar la animación y varias otras complejidades.

Pero buenas noticias para nosotros, los widgets animados implícitos tienen toda esa lógica bajo la manga, y no tenemos que preocuparnos por nada. Dele duration, defina los valores beginning y end y deja que tus widgets se anímen!

Ejemplo 1 — Bar Charts

Imagina que tiene que construir una app con gráficos de barra. Por lo tanto, puede haber un contenedor con altura creciente o decreciente según los valores del gráfico.

Imaginemos que el alto inicial de su Container es 40.0
var height = 40.0;

Y luego su Container será como —

Container(
    width: 60.0,
    height: height,
    color: Color(0xff14ff65),
  ),

Y ahora suponga que tiene un Button y en su método onPressed, usted puede cambiar el alto del Container y el setState() para reconstruir la UI.

onPressed: (){
  setState(() {
    height = 320.0;
  });
},

Pero tristemente tenemos esta siguiente salida.

No hay una transición suave cuando cambiamos los valores de altura. Así que esto se ve raro para una aplicación de gráfico de barras.

Queremos que la barra aumente gradualmente con el tiempo.

Veamos si podemos lograr nuestro efecto deseado con AnimatedContainer.

Veamos algo de magia!

Reemplace su Container normal con AnimatedContainer y suministre una propiedad Duration y vea la magia que sucede!

AnimatedContainer(
  duration: Duration(seconds: 5),
  width: 60.0,
  height: height,
  color: Color(0xff14ff65),
)

Un reemplazo de widget y una línea adicional de código, y listo! ¡Estás animando un contenedor ahora!

Ejemplo 2 — Tomar vuelo

Obviamente usted puede animar las propiedades usuales de Container como color, height, y width . Pero usted puede tambien animar un hijo de Container, usando la propiedad alignment para alinear un hijo de Container.