Cuando construyes una pantalla principal en Jetpack Compose, los últimos detalles marcan la diferencia entre una interfaz funcional y una experiencia pulida. Aquí ajustarás el HomeScreenViewModel de tu To-do App para mostrar la fecha local formateada, mover mensajes a recursos de string reutilizables y equilibrar las proporciones visuales con weight.

¿Cómo mostrar la fecha local formateada en HomeScreenViewModel?

La primera tarea pendiente es traer la fecha del dispositivo y darle un formato legible para el usuario. Dentro del state, usas state.copy para mantener la información existente y actualizar solo el campo date.

La fecha la obtienes con LocalDate.now y, mediante un bloque let, aplicas DateTimeFormatter.ofPattern para definir cómo se verá en pantalla. El patrón incluye el día de la semana, el mes, el día en número y el año.

¿Qué hace DateTimeFormatter.ofPattern? Convierte un objeto de fecha en un string con el formato que tú definas. Por ejemplo, puedes mostrar martes, octubre 22, 2024 en lugar de la fecha cruda del sistema.

Un detalle importante: los días deben ir en minúscula dentro del patrón para que el formateo funcione correctamente. Después aplicas format.it para obtener el resultado final.

¿Por qué usar copy en lugar de reasignar el state?

Usar copy te permite preservar el resto de propiedades del state sin perder información. Si reemplazaras todo el homeState, perderías datos como el resumen de tareas o el progreso. Con copy, solo modificas la fecha y el resto queda intacto.

¿Cómo mover mensajes a string resources reutilizables?

El mensaje de resumen estaba quemado dentro del ViewModel, lo que dificulta cambiarlo o traducirlo. La solución es moverlo a un recurso de string y dejar que el composable lo arme.

Dentro del HomeScreenViewModel, ahora solo envías el tamaño en formato string. La lógica de presentación se traslada al composable summaryInfo, donde usas stringResource para obtener el texto desde los recursos.

Los pasos concretos son:

• Crear un recurso llamado summary_info con el contenido You have %s pending tasks.
• Pasar el taskSummary como argumento para que reemplace el marcador %s.
• Eliminar el mensaje original del ViewModel y dejar solo el dato numérico.

¿Qué es %s en un string resource? Es un marcador de posición que se reemplaza por un valor en tiempo de ejecución. Te permite construir mensajes dinámicos sin concatenar strings manualmente.

Este enfoque separa la lógica de los textos visibles, algo clave si más adelante quieres soportar varios idiomas o cambiar el copy sin tocar código.

¿Cómo equilibrar proporciones con weight en Compose?

La última pieza es visual. La sección de fecha y resumen competía con la de progreso por el espacio disponible, y el balance no se sentía natural.

La solución es asignar weight a cada sección dentro del contenedor. La sección de título y resumen recibe un peso de 1.5, mientras que la sección de progreso recibe un peso de 1. Esto significa que el bloque izquierdo ocupa un poco más de la mitad del ancho disponible.

¿Cómo funciona el modificador weight?

El modificador weight distribuye el espacio sobrante entre los elementos hijos de un Row o Column según la proporción que indiques. Si un elemento tiene 1.5 y otro tiene 1, el primero recibe 1.5 veces más espacio que el segundo.

Al probar la pantalla, el resultado muestra la fecha formateada del dispositivo martes, octubre 22, 2024, junto con el mensaje You have 20 pending tasks. Si modificas el número de tareas, el texto se actualiza automáticamente gracias al string resource.

Con estos ajustes, la pantalla principal del To-do App queda 100% completada y lista para integrarse con las siguientes funcionalidades: visualización y creación de tareas. ¿Cómo organizas tú los textos y proporciones en tus pantallas Compose? Cuéntame en los comentarios.