Mostrar un widget de texto en tu aplicación Flutter
El elemento «Text» es un widget básico en cualquier aplicación Flutter, que te permite, como su nombre lo indica, mostrar texto en tu aplicación. Aquí tienes un ejemplo simple de uso del widget Text, para mostrar «¡Hola a todos!» en el centro de la pantalla:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Mi Aplicación Flutter')),
body: Center(
child: Text('¡Hola a todos!'),
),
),
);
}
}Mostrar texto en varias líneas
El comportamiento predeterminado de un texto en Flutter es ocupar todo el espacio disponible para mostrarse por completo. Sin embargo, es posible que desees que se muestre solo en 2 o 3 líneas por razones estéticas. Para ello, Flutter ofrece las propiedades maxLines y overflow:
Text(
'Este es un ejemplo de texto muy largo que debería mostrarse en varias líneas.',
maxLines: 3,
overflow: TextOverflow.ellipsis,
)En este ejemplo, si el texto excede tres líneas, se truncará con puntos suspensivos.
Cambiar el estilo de un texto
El widget Text tiene varias propiedades de estilo que te permiten modificar su apariencia. Puedes:
- Cambiar su color;
- Cambiar su tamaño;
- Elegir una tipografía;
- Ajustar su alineación;
- Ponerlo en negrita o en cursiva;
- Subrayarlo, etc.
Color
Para cambiar el color del texto, usa la propiedad color de TextStyle:
Text(
'Texto colorido',
style: TextStyle(color: Colors.blue),
)Tamaño
Para cambiar el tamaño del texto, utiliza la propiedad fontSize de TextStyle:
Text(
'Texto de gran tamaño',
style: TextStyle(fontSize: 24),
)Tipografía
Puedes cambiar la fuente de tus textos usando la propiedad fontFamily de TextStyle:
Text(
'Texto con tipografía personalizada',
style: TextStyle(fontFamily: 'Roboto'),
)Si buscas más tipografías para personalizar tu aplicación, considera usar el package Google Fonts.
Alineación
Puedes ajustar la alineación del texto en relación con su contenedor utilizando la propiedad textAlign del widget Text. Aquí tienes un ejemplo de un texto centrado:
Text(
'Texto centrado',
textAlign: TextAlign.center,
)Negrita o cursiva
Tus textos también pueden mostrarse en negrita o cursiva usando las propiedades fontWeight y fontStyle de TextStyle:
Text(
'Texto en negrita',
style: TextStyle(fontWeight: FontWeight.bold),
)
Text(
'Texto en cursiva',
style: TextStyle(fontStyle: FontStyle.italic),
)Subrayado
Para subrayar un texto, utiliza la propiedad decoration de TextStyle:
Text(
'Texto subrayado',
style: TextStyle(decoration: TextDecoration.underline),
)Para más detalles, no dudes en consultar mi artículo sobre cómo subrayar texto en Flutter.
Conclusión
Ahora ya sabes cómo añadir texto en tu aplicación para comunicar información a los usuarios. ¿Por qué no añadir iconos para hacer tus botones más comprensibles?
