Estes widgets son fundamentais para construír interfaces visuais en Flutter. Serven para mostrar contido textual, gráfico (imaxes) e simbólico (iconas).
🔡 Text: estilos, aliñación, maxLines #
O widget Text permite mostrar unha cadea de texto na pantalla. É altamente configurable mediante o parámetro style, e tamén admite aliñacións e límites de liñas.
📌 Propiedades comúns: #
| Propiedade | Descrición detallada e exemplos |
|---|---|
style | Permite aplicar estilos ao texto mediante un obxecto TextStyle. Pódense configurar:• fontSize – tamaño• color – cor• fontWeight – grosor• fontFamily, etc.Exemplo: style: TextStyle(fontSize: 20) |
textAlign | Define a aliñación horizontal do texto dentro do seu contedor. Valores: • TextAlign.left• center• right• justify• start / endExemplo: textAlign: TextAlign.center |
maxLines | Número máximo de liñas que pode ocupar o texto. Se o contido supera ese límite, pódese truncar usando overflow.Exemplo: maxLines: 2 |
overflow | Indica que facer se o texto se desborda do espazo dispoñible. Valores: • TextOverflow.clip – corta o texto• ellipsis – engade ...• fade – esfuma o finalExemplo: overflow: TextOverflow.ellipsis |
🎨 Estilos #
Podes personalizar a aparencia do texto en Flutter mediante a propiedade style, que acepta un obxecto TextStyle.

Text(
'Ola, Mundo!',
style: TextStyle(
fontSize: 24, // Tamaño da fonte
fontWeight: FontWeight.bold, // Grosor do texto
color: Colors.blue, // Cor do texto
fontFamily: 'Roboto', // Familia da fonte
letterSpacing: 1.5, // Espazado entre letras
decoration: TextDecoration.underline, // Subliñado
decorationColor: Colors.red, // Cor do subliñado
),
)
📚 Propiedades máis usadas de TextStyle #
| Propiedade | Descrición | Exemplo de valor |
|---|---|---|
fontSize | Tamaño do texto en píxeles. | fontSize: 20 |
fontWeight | Grosor da letra. Valores posibles: • FontWeight.normal• FontWeight.bold• FontWeight.w100 ata w900 | fontWeight: FontWeight.bold |
color | Cor do texto. | color: Colors.green |
fontFamily | Nome da familia tipográfica (debes incluíla en pubspec.yaml). Explicado no tema 3.1, en 📦 pubspec.yaml: Xestión de Dependencias e Recursos | fontFamily: 'Roboto' |
letterSpacing | Espazo extra entre caracteres. | letterSpacing: 2.0 |
wordSpacing | Espazo extra entre palabras. | wordSpacing: 5.0 |
height | Altura entre liñas (liña a liña), como multiplicador do tamaño da fonte. | height: 1.5 |
decoration | Decoración aplicada ao texto. Valores: • TextDecoration.none – Sen decoración• TextDecoration.underline – Subliñado• TextDecoration.overline – Liña por riba• TextDecoration.lineThrough – Tachado | decoration: TextDecoration.underline |
decorationColor | Cor da liña de decoración (underline, overline, etc.). | decorationColor: Colors.red |
decorationStyle | Estilo visual da decoración. Valores: • TextDecorationStyle.solid – Liña continua• dashed – Liña de guións• dotted – Punteada• double – Dobre liña• wavy – Liña ondulada | decorationStyle: TextDecorationStyle.dashed |
📦 Onde definir novas fontes? #
Para usar unha familia de fonte personalizada, debes declarala en pubspec.yaml e incluír os arquivos .ttf no cartafol do proxecto (assets/fonts).
⚠️ Importante: Ver tema 3.1: 📦
pubspec.yaml: Xestión de Dependencias e Recursos (Assets)
Exemplo en pubspec.yaml:
flutter:
fonts:
- family: Roboto
fonts:
- asset: assets/fonts/Roboto-Regular.ttf

📚 Máis información #
A aliñación do texto: textAlign. #
A aliñación do texto pódese controlar coa propiedade textAlign.
Text(
'Este é un texto moito máis longo para demostrar a aliñación. Pode ser á esquerda, á dereita ou centrado.',
textAlign: TextAlign.center, // Aliñación (left, right, center, justify, start, end)
style: TextStyle(fontSize: 16),
)
maxLines #
Para limitar o número de liñas que pode ocupar o texto, utiliza a propiedade maxLines. Se o texto excede este límite, truncarase. Podes especificar como se truncará o texto coa propiedade overflow.

Text(
'Este é un texto moi, moi longo que podería ocupar varias liñas. Queremos limitar as liñas para que non ocupe demasiado espazo na pantalla. 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: 2, // Limita a 2 liñas
overflow: TextOverflow.ellipsis, // Engade "..." se o texto é truncado
style: TextStyle(fontSize: 16),
)
🖼️ Image: AssetImage, NetworkImage #
O widget Image permite mostrar imaxes locais ou en liña. É moi útil para ilustracións, fondos, logos, etc.
🧰 Propiedades Comúns do Widget Image #
O widget Image de Flutter permite moitas opcións de configuración. A seguinte táboa resume as máis habituais, explicando como se usan e cos valores posibles cando corresponda.
| Propiedade | Descrición Detallada | Exemplo de uso | |
|---|---|---|---|
image | Fonte da imaxe. Explicado nos seguintes apartados dos apuntes. Pode ser: • AssetImage('ruta') para imaxes locais• NetworkImage('url') para imaxes en liña• FileImage(file) para ficheiros locais | image: AssetImage('assets/imaxe.jpg') | |
width | Ancho da imaxe en píxeles. | width: 200 | |
height | Alto da imaxe en píxeles. | height: 150 | |
fit | Como se adapta a imaxe ao seu contedor. Valores: • BoxFit.fill – Deforma para encher• BoxFit.contain – Axusta sen recortar• BoxFit.cover – Recorta para encher• BoxFit.fitWidth – Axusta ao ancho• BoxFit.fitHeight – Axusta á altura• BoxFit.none – Sen axuste• BoxFit.scaleDown – Só redimensiona se é necesario | fit: BoxFit.cover | |
alignment | Posición da imaxe no contedor. Valores: • Alignment.center• Alignment.topLeft, topRight, bottomLeft, etc.• Valores personalizados con Alignment(x, y) (de -1.0 a 1.0) | alignment: Alignment.bottomRight | |
color | Aplica un filtro de cor sobre a imaxe. Usado con colorBlendMode. | color: Colors.grey | |
colorBlendMode | Como se mestura a cor coa imaxe. Exemplo: BlendMode.darken, multiply, screen, overlay, etc. | colorBlendMode: BlendMode.darken | |
repeat | Repetición da imaxe no contedor. Valores: • ImageRepeat.noRepeat• ImageRepeat.repeat• ImageRepeat.repeatX• ImageRepeat.repeatY | repeat: ImageRepeat.repeatX | |
matchTextDirection | Se é true, a imaxe invírtese horizontalmente en contornos RTL (Right-to-Left). Útil para idiomas como árabe ou hebreo. | matchTextDirection: true | |
filterQuality | Calidade do suavizado da imaxe: • low, medium, high, none. A maior calidade pode consumir máis recursos. | filterQuality: FilterQuality.high | |
loadingBuilder | Permite mostrar un widget (por ex. spinner) mentres se carga a imaxe en liña (Image.network). | loadingBuilder: (context, child, progress) { ... } | |
errorBuilder | Widget alternativo que se amosa se hai erro ao cargar a imaxe (por exemplo, se a URL non é válida). | errorBuilder: (context, error, stackTrace) { ... } | |
semanticLabel | Texto descritivo da imaxe para tecnoloxías de accesibilidade (como lectores de pantalla). | semanticLabel: 'Foto de perfil' | |
excludeFromSemantics | Se true, exclúe esta imaxe das ferramentas de accesibilidade. | excludeFromSemantics: true |
🧷 Tipos principais: #
| Constructor | Uso | Exemplo |
|---|---|---|
Image.asset() | Imaxe almacenada localmente no proxecto | Image.asset('assets/imaxes/logo.png') |
Image.network() | Imaxe cargada desde unha URL | Image.network('https://exemplo.com/imaxen.jpg') |
💡 Para usar imaxes locais (
assets), cómpre declarar a ruta no ficheiropubspec.yaml.
🧪 Exemplo: #
Column(
children: const [
Image.asset(
'assets/imaxes/logo.png',
width: 100,
height: 100,
),
SizedBox(height: 20),
Image.network(
'https://flutter.dev/assets/homepage/carousel/slide_1-layer_0-6b38104b1b6c772316bed112fb0a225e.png',
width: 200,
),
],
)
AssetImage (Imaxes Locais) #
Para usar AssetImage, primeiro debes engadir a imaxe ao teu proxecto e rexistrala no ficheiro pubspec.yaml.
⚠️ Importante: Ver tema 3.1: 📦
pubspec.yaml: Xestión de Dependencias e Recursos (Assets)
Velaquí un resumo do explicado no tema 3.1, para incluír as imaxes no pubspec.yaml:
- Crea unha carpeta para as túas imaxes (por exemplo,
assets/imaxes/) na raíz do teu proxecto. - Coloca as túas imaxes nesa carpeta.
- Engade/Modifica as seguintes liñas ao teu ficheiro
pubspec.yaml(asegúrate de manter a indentación correcta):

flutter:
uses-material-design: true
# Para engadir assets á túa aplicación, usa esta sección.
assets:
- assets/imaxes/ # <--- Engade esta liña (asegúrate da indentación)
# - assets/imaxes/drodicio.jpg # Se queres declarar só unha imaxe específica
- Usa
AssetImageno teu código:
Image(
image: AssetImage('assets/imaxes/drodicio.jpg'),
width: 200, // Ancho da imaxe
height: 150, // Alto da imaxe
fit: BoxFit.cover, // Como se axusta a imaxe ao seu espazo
)
//de forma máis concisa:
Image.asset(
'assets/imaxes/drodicio.jpg',
width: 200,
height: 150,
fit: BoxFit.cover,
)
NetworkImage (Imaxes dende URL) #
NetworkImage permite cargar imaxes directamente dende unha URL en internet. Asegúrate de que o teu dispositivo teña conexión a internet.

Image(
image: NetworkImage('https://picsum.photos/250'),
width: 250,
height: 250,
fit: BoxFit.contain,
loadingBuilder: (contexto, fillo, progresoCarga) {
if (progresoCarga == null) return fillo;
return Center(
child: CircularProgressIndicator(
value: progresoCarga.expectedTotalBytes != null
? progresoCarga.cumulativeBytesLoaded / progresoCarga.expectedTotalBytes!
: null,
),
);
},
errorBuilder: (contexto, obxectoErro, trazaPila) {
return Text('Non se puido cargar a imaxe');
},
)
//de forma máis concisa:
Image.network(
'https://picsum.photos/250',
width: 250,
height: 250,
fit: BoxFit.contain,
)
🔣 `Icon #
O widget Icon permite mostrar iconas vectoriais do sistema de Material Design. É moi útil para botóns, navegación ou elementos decorativos.
📌 Propiedades comúns: #
| Propiedade | Descrición detallada e exemplos |
|---|---|
icon | Define o tipo de icona a amosar. Usa iconas do paquete Icons, como:• Icons.home• Icons.add• Icons.settings, etc.Exemplo: icon: Icons.home |
size | Tamaño da icona en píxeles. Exemplo: size: 40 |
color | Cor da icona. Usa calquera valor de Colors, Color, ou Theme.of(context).colorScheme, etc.Exemplo: color: Colors.teal |
As iconas máis usadas están dispoñibles a través da clase
Icons.
🔍 Como buscar e usar iconas en Flutter #
Flutter inclúe unha ampla colección de iconas a través da libraría Icons, baseada nas Material Icons de Google.
Para ver a lista completa de iconas que podes usar en Flutter, accede á galería oficial:
📌 Como buscar:
- Vai á páxina: https://fonts.google.com/icons
- Usa o buscador para atopar unha icona polo seu nome ou función (ex.: “home”, “email”, “star”…).
- Fai clic nunha icona para ver o seu nome exacto. Exemplo:
star,home,settings.
🧪 Exemplo #

const Icon(
Icons.star,
size: 40,
color: Colors.orange,
)
🧪 Exemplo #
Icon(
Icons.star, // Icona a mostrar
color: Colors.yellow, // Cor da icona
size: 50, // Tamaño da icona
semanticLabel: 'Icona de estrela', // Descrición para accesibilidade
)
//Podes atopar unha ampla variedade de iconas en Icons (parte do paquete material).
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.sun, color: Colors.laranxa, size: 40),
Icon(Icons.pencil, color: Colors.azul, size: 40),
Icon(Icons.volume_off, color: Colors.vermello, size: 40),
],
)