Practicando con Modifier

Ejercicio

Vamos a seguir aprendiendo pasos en la creación de elementos Composables para nuestra App. En este caso, primero vamos a crear una función Composable InformacionScreen en la que tengamos cuatro textos que se muestren uno debajo de otro y con la siguiente información IES Doctor Balmis, Ciclos Formativos Informática, SMR, ASIR, DAM y DAW. La solución final debería ser algo como lo siguiente:

Para ello añadiremos estos textos dentro de un componente column, el background del componente Column mantendrá el color secondary de la paleta de MaterialTheme, además de ocupar todo el ancho. La salida en el Preview debería ser algo como lo siguiente:

Ahora vamos a formatear el código para que el aspecto sea más visual y reutilizable. Para ello crearemos otra función Composable TextoConFormato con tres argumentos, texto de tipo String, color de tipo Color que por defecto almacenará el color inversePrimary de MaterialTheme y style de tipo TextStyle que por defecto será la tipografía headlineMedium también de MaterialTheme.
Volveremos a InformacionScreen y ahora sustituiremos la llamada a Text por la función TextoFormateado. Visualiza el resultado.

El siguiente paso será, sustituir el estilo de la tipografía de los dos primeros textos con headlineLarge y headlineSmall de MaterialTheme, respectivamente. Vuelve a visualizar.

Ahora queremos formar un encabezado con los dos primeros textos, para lo que vamos a añadir un borde con espaciado, ¿como tendríamos que añadirlo para conseguir el siguiente resultado?. Recuerda que hay un ejemplo parecido en los apuntes.

El siguiente paso sería encuadrar cada uno de los ciclos para poder darle un fondo y un borde. Pero para no repetir código, decidimos usar una función de extensión de Modifier EstiloCiclos a la que le llegará un color (para poder diferenciar unos de otros), pero que además de asignar el color al fondo, le añadirá una forma de RoundedCornerShape(3.dp). Este modifier ocupará todo el ancho y tendrá un padding de 10.

💡 Si quieres usar los mismos colores de la imagen, son: SMR - errorContainer, ASIR - tertiaryContainer, DAW - secondaryContainer, DAM - primaryContainer

Para finalizar, quedarían unos pequeños retoques, añadir un componente Spacer al TextoConFormato, para que sirva de separación entre los ciclos, centrar el texto de la cabecera, añadir un padding para todo el contenido, además otro de separación entre el título y los ciclos ¿Como lo harías?.
Si no te gusta el contraste del color de texto, puedes cambiar el color por defecto a tertiary en TextoConFormato.