Construir tu primera pantalla en Jetpack Compose implica combinar componentes reutilizables, manejar estados y dar estructura visual con Scaffold. Aquí aprenderás a montar una HomeScreen funcional en light y dark mode, separando tareas completadas y pendientes con encabezados pegajosos y un menú desplegable.

Cómo separar secciones con un componente SectionTitle

Antes de armar la pantalla, necesitas un componente que marque la división entre bloques de contenido. El SectionTitle es un composable sencillo que recibe un modifier y un string, y se encarga de diferenciar visualmente la lista de tareas completadas de las pendientes.

Dentro del componente colocas un Text con estilo headlineMedium y un padding de 8 dp [01:05]. El modifier siempre debe ir en el contenedor padre, porque así cualquier ajuste de layout queda centralizado y no se pierde la coherencia visual.

¿Qué es un modifier en Jetpack Compose? Es un parámetro que aplica cambios de tamaño, padding, color de fondo o comportamiento a un composable. Siempre se recomienda exponerlo como parámetro para reutilizar el componente.

Una vez listo, envuelves el preview dentro del tema de la app y activas showBackground = true para visualizarlo correctamente.

Cómo estructurar HomeScreen con Scaffold y estado

La pantalla principal recibe un modifier y un state del tipo HomeDataState, una data class que agrupa la fecha, el resumen, las tareas completadas y las pendientes [03:10]. Centralizar el estado en una sola estructura facilita pasar los datos al composable sin ensuciar la firma con múltiples parámetros.

Scaffold es el composable que define la estructura base de la pantalla:

• Top bar en la parte superior con título y acciones de menú.
• Body con el contenido principal, normalmente desplazable.
• Floating Action Button (FAB) para la acción primaria.
• paddingValues que se propagan al contenido para evitar solapamientos.

Cómo configurar la TopAppBar y el menú desplegable

Dentro de la TopAppBar colocas un Text con el nombre de la app consumido desde stringResource, lo que te permite centralizar los textos en el archivo XML de resources/values/strings. El color recomendado es onSurfaceVariant con fontWeight.Bold para mantener contraste sobre la surface.

Las acciones del menú se construyen con un Box que contiene un Icon con el vector MoreVert, un padding de 8 dp y un clickable que cambia el estado isMenuExpanded [05:40]. Ese estado se declara con:

kotlin var isMenuExpanded by remember { mutableStateOf(false) }

El DropdownMenu recibe expanded = isMenuExpanded y un onDismissRequest que detecta clics fuera del menú para cerrarlo. Dentro colocas un DropdownMenuItem con texto Delete all para borrar todas las tareas.

¿Para qué sirve onDismissRequest? Es la función que se ejecuta cuando el usuario toca fuera del menú desplegable. Ahí debes cambiar el estado a false para cerrarlo automáticamente.

Por qué usar LazyColumn en vez de Column

El contenido del cuerpo es propenso a cambios, así que se usa LazyColumn en lugar de una Column normal. La diferencia clave: LazyColumn solo renderiza los elementos visibles en pantalla, mejorando el rendimiento cuando la lista crece [07:30].

El modifier del LazyColumn recibe los paddingValues del Scaffold para respetar el espacio de la top bar y del FAB. Después agregas:

• item { SummaryInfo(...) } para mostrar fecha y resumen.
• stickyHeader { SectionTitle(...) } para Completed y Pending.
• items(state.completedTask, key = { it.taskId }) { TaskItem(...) } para renderizar cada tarea con un identificador único.

El parámetro key con taskId es crucial: permite a Compose identificar cada ítem cuando agregas, eliminas o actualizas tareas, y habilita animaciones fluidas en transiciones [09:15].

Cómo lograr headers pegajosos y un FAB para nueva tarea

La primera versión usaba SectionTitle como ítem normal, pero al hacer scroll los títulos desaparecían. La solución es reemplazarlo por stickyHeader, que mantiene el encabezado pegado a la parte superior mientras el usuario navega por la lista [12:40].

Como stickyHeader y TopAppBar están marcados como APIs experimentales, debes agregar la anotación @OptIn(ExperimentalMaterialApi::class) o aplicar el opt-in a todo el archivo desde el sugerido del compilador.

El FloatingActionButton se ubica en la propiedad floatingActionButton del Scaffold. Recibe un onClick vacío por ahora y un content con un Icon de tipo Add, que más adelante navegará a la pantalla de creación de tareas.

Para dar respiración visual al contenido, ajustas el LazyColumn con:

kotlin verticalArrangement = Arrangement.spacedBy(4.dp) modifier = Modifier.padding(16.dp)

Cada TaskItem recibe además un RoundedCornerShape(8.dp) para suavizar las esquinas y aportar jerarquía visual.

Cómo previsualizar HomeScreen en light y dark mode

Para revisar la pantalla en ambos modos creas un HomeScreenPreviewProvider que implementa PreviewParameterProvider<HomeDataState> y devuelve una sequenceOf con datos de ejemplo [15:50]. Esto alimenta el preview con tareas reales sin depender del backend.

En el preview activas las dos variantes (claro y oscuro) y pulsas Start Interactive Mode para hacer scroll, abrir el menú y validar que los sticky headers se comporten como esperas.

¿Cómo quedó tu HomeScreen? Comparte un pantallazo en light y dark mode en los comentarios y cuéntame qué ajustaste en tus componentes.