Nuevo Widget para Flutter: Calendar Timeline

Flutter

Nuevo Widget para Flutter: Calendar Timeline

¡Buenas a todos! En esta ocasión veremos otro componente que hemos creado y compartido con la comunidad Flutter para ofrecer una nueva versión de un Widget tan esencial como es un calendario.

Introducción

Cuando surgió la necesidad de gestionar diferentes días en nuestro proyecto, empezamos a buscar componentes para su análisis. No encontramos nada que nos encajara y decidimos crearlo desde cero.

La idea central desde UI/UX es poder ver de una forma clara en que día nos encontramos. También poder desplazarte entre días, desde la misma pantalla y sin muchos gestos. La forma del componente ayuda a que el paso entre diferentes días sea muy ágil al no tener que ir a una nueva pantalla.

El scroll horizontal nos permite ocupar poco espacio de nuestra pantalla y poder ir cambiando entre días o meses con una sola mano.

Uso

Como cualquier otro componente, deberemos añadirlo a nuestro pubspec.yaml. Aquí tenéis el enlace a la documentación oficial del package calendar_timeline.

Únicamente deberemos importarlo en el fichero que vayamos a usarlo y tener en cuenta qué va a coger todo el espacio horizontal disponible para mostrar los días y meses. Si este está encapsulado en algún Widget que limite su espacio horizontal desaparecerá parte de la lista y se verá cortado.

Configuración

Hemos añadido diferentes parámetros de configuración para poder adaptar el Widget a tus necesidades:

  • initialDate: Nos permite indicar el día en el que se va a colocar nuestro calendario cuando sea mostrado.
  • firstDate: el primer día por el cual se comienza la lista de días y meses.
  • lastDate: última fecha disponible en nuestro calendario.
  • selectableDayPredicate: mediante una condicional nos permite bloquear días que no queramos que sean seleccionables cuando cumplan la condición especificada en la función.

La manera de obtener información del día seleccionado en nuestro calendario es a través de un callback que será ejecutada cuando se selecciona un día, no cuando se cambia de mes. El parámetro es onDateSelected con el argumento de tipo DateTime con la fecha seleccionada.

Para la parte de diseño tenemos los parámetros necesarios para adaptar el paquete al diseño de nuestro proyecto. Es altamente configurable con los siguientes atributos:

  • leftMargin: Margen lateral izquierdo que nos permite alinear los elementos en un eje vertical específico. Este no limita el scroll horizontal de los meses y días hacia la izquierda.
  • monthColor, dayColor, activeDayColor, activeBackgroundDayColor, dotColor: Son parámetros que nos permiten configurar los colores de los componentes de nuestro calendario.

Tenemos que tener en cuenta que se tienen que cumplir algunas condiciones para que nuestro calendario funcione correctamente. Cómo, por ejemplo, que la fecha inicial sea posterior al primer día disponible en nuestro calendario o que el último día sea posterior a la fecha inicial o la primera fecha disponible.

Resumen

Esperamos que con este pequeño post se hayan aclarado algunas dudas sobre el comportamiento de nuestro componente y su implementación.

También os animamos a que lo probéis en vuestros proyectos y nos deis feedback sobre mejoras o errores que encontréis en su funcionamiento. Intentaremos implementar funcionalidades nuevas y correcciones en el menor tiempo posible.

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

Enlace a la documentación oficial de Calendar Timeline 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