Vamos a usar el widget de texto 1000 veces y una más en cada una de nuestras aplicaciones, nos permite mostrar texto en nuestra pantalla. Lo vimos previamente cuando hicimos nuestro código de prueba.
Para mostrar las capacidades del widget Text en la pantalla estaremos usando nuestro código base que creamos en el post “Conoce los principales componentes de tu aplicación”.
Lo primero que haremos es escribir el código mínimo para declarar un texto. Reemplazaremos todo dentro de la etiqueta de body: agregando lo siguiente:
body: Text(
"Hola Mundo!"
)
Quedando nuestro archivo hello_app/lib/main.dart de la siguiente manera:
hello_app/lib/main.dart
Hemos puesto nuestro Hola mundo en pantalla, ahora cambiaremos nuestro texto a uno muy largo para ver cómo se adapta el texto en la pantalla.
body: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
)
Para textos usualmente debemos definir un número máximo de líneas a mostrar, esto con la finalidad de mantener nuestro layout lo más fiel posible en caso de tener un texto muy largo, este límite lo asignaremos con la propiedad maxLines: en la que designamos el número de líneas que deseamos mostrar.
body: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
maxLines: 3
)
Podemos ver que automáticamente el texto se corta de tajo. Si queremos cambiar esta configuración utilizaremos la propiedad overflow: la cual nos permite definir cómo queremos que se vea el final de nuestra línea.
Estaremos utilizando overflow: TextOverflow.ellipsis que nos genera puntos suspensivos al final de nuestra caja de texto.
body: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
maxLines: 3,
overflow: TextOverflow.ellipsis
)
Ahora cambiemos hacia overflow: TextOverflow.fade que nos genera el efecto de desaparecer gradualmente la última línea.
body: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
maxLines: 3,
overflow: TextOverflow.fade
)
Como podemos ver estas son las configuraciones básicas de una caja de texto. Ahora vamos a explorar algunas de las posibilidades de personalización del widget para darle un estilo, hacerlo más vistoso o simplemente que cumpla con los lineamientos de diseño que se nos requieran. Para esto utilizaremos la propiedad style: la cual personalizaremos con el uso del widget TextStyle para especificar que se le dará estilo al texto.
TextStyle
Éste widget nos permite elegir un color, usar negritas o cursivas en nuestros textos, etc.
Lo primero que haremos será cambiar el puntaje de tamaño de texto para hacerlo más grande. Vamos a asignarle 24 dp (Density pixel) de tamaño.
Text(
"...",
maxLines: 3,
overflow: TextOverflow.fade,
style: TextStyle(
fontSize: 24
)
)
¡Genial! aumentado el tamaño podemos apreciar fácilmente el efecto de overflow: TextOverflow.fade que empieza a desaparecer el texto en la última línea.
Ahora vamos a cambiar el color del texto por un azul, para esto debemos de hacerlo con la propiedad color: del widget TextStyle.
Text(
"...",
style: TextStyle(
fontSize: 24,
color: Colors.blue
)
)
Si queremos mostrar el texto con negritas debemos utilizar la propiedad fontWeight: del widget TextStyle.
Text(
"...",
style: TextStyle(
fontSize: 24,
color: Colors.blue,
fontWeight: FontWeight.bold
)
)
Para poner cursivas utilizamos fontStyle:.
Text(
"...",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
color: Colors.blue,
fontStyle: FontStyle.italic
),
)
Al final nuestro código completo del archivo hello_app/lib/main.dart quedaría de la siguiente manera:
hello_app/lib/main.dart
Ahora ya tienes las bases para configurar el texto dentro de tu aplicación. En este post hemos explorado cómo utilizar el widget que usaremos más comunmente en nuestras aplicaciones y cómo podemos personalizarlo.
¿Te está gustando este curso? Aquí hay más temas que otras personas están viendo en este momento.