Serie Flutter Animated: Containers Animados

CarlosMillan
Comunidad Flutter
Published in
4 min readJan 29, 2019

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

Crédito: Poojã Bhaumik

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),
)
Listo!

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.

El hijo del Container es un Icon .

La propiedad Alignment afecta el hijo de un Container

La alineación inicial es Alignment.bottomCenter

Haciendo clic al botón, cambiamos el alignment a Alignment.center

Y el avión vuela justo al centro de la pantalla!

Puede encontrar el código de trabajo aquí

Ejemplo 3 — Jugando con muchos colores!

No un color, pero muchos colores. Vamos a animar la gradientdel Container .

Imagine jugando con arco iris

Aquí definí sólo dos colores y su alignment inicial y cambié ambas propiedades en setState() .

Código aquí —

Eso es todo.

¿Qué más tenemos en la serie Animated?

  • AnimatedContainers
  • AnimatedOpacity (Próximamente)
  • AnimatedCrossFade (Próximamente)
  • Y mucho más…

Comunidad Flutter Dart en Español: https://www.facebook.com/groups/flutter.dart.spanish

Flutter Dart en Telegram: @flutter_dart_spanish

Mi cuenta en Twitter: @unAndroidMas

--

--