No todas las animaciones son complejas

Muchos han expresado su interés en como realizar increíbles animaciones que puedan hipnotizar usuarios, sin perder el gran desempeño por el cual Flutter es reconocido. Si, si puedes! No solo puedes lograr animaciones que dejen con la boca abierta con transformaciones personalizadas, también puedes lograr grandes resultados dando pasos de bebé y utilizar lo que esta disponibles en el SDK de Flutter. El equipo de Flutter ha trabajado arduamente para lograr hacerlo fácil con “animaciones implícitas”.

Credito: me.me

En este post, miraremos AnimatedContainer . Si deseas leer mas acerca de este, definitivamente te recomiendo que leas esta traducción de CarlosMillan de la publicación original de Pooja Bhaumik donde ella nos explica este widget a mas detalle.

Nuestra tarea para hoy:

Separemos esto en componentes, veremos como estas UI podría hacerse con algunas cosas como:

• Stack
• Un par de botones arriba
• Una imagen en el background
• Textos (Fecha y nombre)
• Y… Qué es eso en la parte de abajo? es un bottomSheet, o quizá, solo quizá, un AnimatedContainer.

Eso es lo que logro ver a primera vista, pero tu sabes esto necesitara un poco mas que eso. Usaremos algunos Rows , Columns , Containers (regular y animado) ademas de un InkWell. Necesitamos el InkWell por que se necesitara algo al cual dar un Tap esto para cambiar nuestros valores del AnimatedContainer y dejar que la magia dentro de Flutter fluya!

Escribamos algo de código!

Primero, estaremos trabajando con un statefulWidget este regresa un Scaffold, con un Stack para su body:

Sin mucha explicación necesaria aquí, sigamos!!

Esperen, es código duplicado lo que veo? o no, eso no esta listo no podemos continuar así. Necesitamos cambiar eso antes de que alguien lo vea y piense que estamos codificando en la edad de piedra…. y que mi jefe me quite la maquina para café!

Ahora que corregimos eso, ¿Donde estábamos? A si… Empezaremos con un Stack el cual tiene un Container como su primera capa. Nuestro Container tiene un Image como fondo y usamos Boxfit.cover para asegurar que la Image tome completamente el Container . En la segunda capa tenemos un Column y dejaremos sus propiedades por defecto, MainAxisAligment.max esto con el fin de que obtenga todo el espacio disponible es el MainAxis.

El resto de esto es algo bastante fácil. Usaremos un Container como algo de Padding y dentro de el pondremos un Row con un par de Botones. Dejaremos la propiedad MainAxisAligment del Row como MainAxisAligment.spaceBetween con esto daremos por terminada la parte superior de nuestra UI.

Entonces, has notado que no hemos dicho nada acerca de algún AnimatedController o SingleTickerProviderStateMixin ? ahora, si ninguna de estas palabras se te hace conocida solo significa que estas en el lugar indicado.

El paso final es hacer ese pequeño botón, blanco, parecido a una pastilla y vaya casi a tamaño completo de pantalla o de regreso, esto cuando lo presionamos, veamos como hacerlo!

Voy a “codear y explicar luego”; de esta manera tendrás oportunidad de leerlo, procesarlo y quizá podrás aprender algo de este.

No es mucho lo que fue agregado para la animación:

• El widget Positioned puede utilizarse dentro del Stack para especificar la posición de “nuestra pequeña pastilla”. Solo definimos que su propiedad bottom es 0, provocando que nuestra pastilla este alineada con la parte inferior de nuestra pantalla.
• Agregamos la variable bool llamada “open” para conocer el estado de la pastilla, la inicializamos con un valor de false.
• Dos variables mas “minHeight” y “maxHeight” estas serán las encargadas de controlar la altura de nuestro AnimatedContainer para crear nuestra animación. Para lograr esto, calculamos el 10% y el 85% de la altura de la pantalla utilizando MediaQuery.of(context).size.height .
• Ahora podemos agregar el AnimatedContainer , tomando ventaja de su poder y la funcionalidad que las animaciones implícitas proveen. No olvides definir la propiedad duration, la necesitar para que este widget funcione correctamente.
• Finalmente, agregamos el Container (la “pastilla”) y la envolvemos en un InkWell esto con el objetivo de cambiar el valor de variable open.

Encontraras un poco mas de código del que yo describí aquí, pero creo se puede comprender fácilmente. Tiene algunos Text, Padding y un BorderRadius pero te dejare que los explores y juegues con ellos.

Y así de rápido, tenemos una animación pequeña pero utilizable que no nos costo gran esfuerzo. Esta es un diseño algo básico para una animación de UI, pero ese es el objetivo de este post. Si hace poco empezaste a coquetear con Flutter esta es una entrada para ayudarte a ir escarbando cada vez más profundo en el SDK.

Este código se puede mejorar bastante. Puedes empezar con un AnimationController para tener mas control, necesitaras agregar el mixin correcto para que esto funcione. Si te preguntas ¿Puedo usar otros widget? Absolutamente, como por ejemplo GestureDetector .

Puedes jugar con otros ajustes para el Container y ver como cambian y se comportan! Esta es la belleza del código, puedes intentar diferentes enfoques y obtener el mismo resultado en tu UI pero con un mejor (o peor) desempeño. Nunca olvides el desempeño, y otra parte importante es la UX de la app. Recuerda, un buen desempeño puede ser la diferencia entre una gran Experiencia de Usuario y una App que nadie quiere instalar.

Puedes seguir al autor aquí:

FlutterES (@EsFlutter) | Twitter