Time Range para Flutter

Flutter

Time Range para Flutter

¡Buenas a todos! En esta entrada hablaremos sobre el componente time range. Diseñado y creado desde cero, buscando solucionar la falta de opciones en componentes horarios.

Introducción

Comenzábamos un proyecto nuevo donde la definición de horarios y disponibilidad de la la agenda de los usuarios era parte crucial. Para ello necesitábamos un selector de horas muy claro que no necesitara de navegación entre pantallas, con las opciones horarias siempre desplegadas y fácilmente customizable para diversos contextos de uso y plataformas.

Empezamos a investigar y no encontrábamos algo que resolviera bien este contexto mas allá de las soluciones estándar que ya incorpora el framework de manera nativa.

Por lo que pensamos en crear uno desde cero. Con la idea de compartirlo con la comunidad para quien, como nosotros, necesitara resolver otros casos de uso en selectores de horario y que  puedan reutilizarlo para adaptarlo a sus proyectos.

Implementación

La idea central del componente es que pueda ser reutilizable e incluso exportable a otros proyectos totalmente diferentes del que fue creado. Para ello, teníamos que crear métodos y propiedades que permitieran que fuera configurable y que su interacción no tuviera efectos de lado en ninguna otra parte de nuestra aplicación.

Para comenzar únicamente deberemos añadir la dependencia del componente a nuestro pubspec.yaml Os dejo por aquí la documentación oficial del proyecto y las diferentes versiones.

Vistazo a nuestro componente

Este componente nos permite seleccionar un rango de tiempo, en base a un rango que le hayamos definido y un bloque de tiempo.

  • Se compone de dos listas horizontales que nos permite navegar entre todos los bloques de hora disponibles.
  • Los selectores de tiempo cambian su estilo dependiendo de cuál ha sido seleccionado.
  • Se alinean de forma vertical en la parte izquierda de la pantalla, ofreciendo así una vista más rápida al usuario de lo que ha seleccionado.

Para poder interactuar con él, exponemos una callback que se ejecutará cuando el usuario haya seleccionado dos horarios, uno de inicio y otro de fin. Siempre que estos sean correctos. Esta callback nos devolverá un objeto Range que almacena dos instacias del objeto TimeOfDay con la información de los rangos horarios que se hayan seleccionado.

Es importante recalcar, que la segunda fila que contiene el rango horario fin, se modifica dinámicamente, dependiendo del rango inicio seleccionado en la primera fila.

Resumen

Esto es todo por nuestra parte. Esperamos que os animéis a probar el componente y os sea de gran ayuda para generar vuestras fantásticas aplicaciones hechas en nuestro framework favorito.

Por último y no menos importante, queremos escuchar vuestras mejoras acerca del componente. Funcionalidades que no hayamos pensado o bugs que puedan surgir.

Muchas gracias por vuestro tiempo y ¡Nos vemos en la próxima!

Enlace a la documentación oficial de Time Range en pub.dev

Déjanos un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Suscríbete a nuestra Newsletter