Serie Flutter Animated: Containers Animados
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),
)
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 gradient
del Container
.
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