Al trabajar con tareas Do0ne noté un aumento en la productividad y pensé en potenciarlo aún más mediante estímulos visuales para mantener el foco y terminar antes. La idea fue iniciar un temporizador cada vez que se crea una tarea Do0ne para poder seguir su tiempo transcurrido y mostrarlo en la interfaz.

FlutterFlow incluye un widget temporizador integrado con modos Count Down y Count Up, pero sus opciones de formato son limitadas y no permite mostrar el tiempo en días, algo que necesitaba. Tras explorar alternativas opté por usar la función de Widget Personalizado de FlutterFlow.

Un Widget Personalizado permite incrustar código Flutter propio como un widget y es ideal para características avanzadas o diseños que los widgets por defecto no soportan. Al implementar la lógica básica del temporizador encontré tres problemas prácticos: ausencia de opciones UI integradas para dar estilo al texto del temporizador, el texto quedaba alineado a la izquierda por defecto y la propiedad de alineación en los ajustes del widget no funcionaba como esperaba.

La solución fue resolver todo directamente en el código del Widget Personalizado. Así pude formatear la salida del temporizador y estilizarla exactamente como necesitaba. Añadí alineación centrada usando textAlign con TextAlign.center y envolví el texto en un Center para garantizar centrado visual. También aproveché FlutterFlowTheme para adoptar la tipografía y paleta de la app y permitir que el color del texto se ajuste según el tema.

El temporizador ahora muestra correctamente el tiempo transcurrido de cada tarea Do0ne y añadí variaciones de color según el estado temporal: dentro de 4 horas color por defecto, por encima de 12 horas color de advertencia y por encima de 24 horas color de alerta. Además integré pequeños ajustes de UI para que el contador y sus elementos mantengan alineación y envoltorio correctos en distintos tamaños de pantalla.

Con el crecimiento del número de tareas completadas la sección de lista empezó a ocupar demasiado espacio, por eso redimensioné esa área para mantener la interfaz limpia y fácil de leer sin sacrificar la visibilidad del temporizador.

En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida y acompañamos a nuestros clientes desde el análisis hasta la puesta en producción. Ofrecemos servicios de software a medida, aplicaciones a medida, inteligencia artificial y seguridad, incluyendo ciberseguridad y pentesting, además de servicios cloud aws y azure y soluciones de inteligencia de negocio como power bi. Si buscas crear funcionalidades personalizadas como este temporizador en FlutterFlow o una solución empresarial más amplia, podemos ayudarte con desarrollo a medida y estrategias de ia para empresas.

Conoce más sobre nuestro trabajo en desarrollo de aplicaciones y software a medida y explora nuestros servicios de inteligencia artificial en servicios de inteligencia artificial. Entre nuestras áreas de especialidad también están agentes IA, servicios inteligencia de negocio, servicios cloud aws y azure, y ciberseguridad para proteger tus activos.

Si te interesa implementar un temporizador personalizado, optimizar la experiencia de usuario o desplegar soluciones avanzadas de inteligencia artificial y seguridad, en Q2BSTUDIO adaptamos la tecnología a tus necesidades y te acompañamos en todo el ciclo de vida del producto.