En el episodio de hoy hablamos de «the motion system«, unas nuevas directrices dentro de Material design sobre patrones de transiciones. La idea es que mediante diferentes tipos de animaciones de transiciones entre los diferentes elementos de la app, consigamos que el usuario entienda perfectamente donde está en todo momento y pueda navegar de forma muy intuitiva.

Estos patrones de transición son cuatro:

Container transform: Para elementos que «contienen» a otros elementos, como si se abrieran o expandieran para mostrar al elemento contenido. Por ejemplo cuando seleccionamos un elemento de una lista y se abre su página de detalleShared axis: Transición entre elementos entre los que se puede navegar y que están a un mismo nivel. Por ejemplo el cambio de un «paso 1» a un «paso 2» en un proceso de compra. Como un desaparecer y aparecer pero combinado con un movimiento horizontal o vertical en función del sentido de la navegación que queramos que experimente el usuario.Fade through: Transición entre elementos que no tienen una relación clara. Por ejemplo si abrimos otro elemento de la app desde un menú. El efecto es el de desaparecer y aparecer.Fade: Para elementos que aparecen temporalmente y que no tocan los bordes de la pantalla, como un formulario modal. Tienen una animación parecida al anterior pero combinado con algún efecto de escalado.

Primero definimos un poco lo que es Material design, la guía de diseño y estilo para apps de Google que nació de la mano de Android 5.0. Creo que es muy útil para que los usuarios tengan una buena experiencia de usuario si todas las apps de su sistema tienen un mismo orden y unos mismos principios. Además nos da una base consistente que poder usar si no somos diseñadores.

Hablamos del plugin animations, que nos sirve para implementar estas novedades y de lo que significa que desde el minuto uno tengamos este plugin.

Nombramos también brevemente el widget de la semana de Flutter, ListWheelScrollView. Una auténtica maravilla para conseguir un efecto muy atractivo en nuestras listas de elementos.