---
title: 📝 Texto, iconas e imaxes
description: "## 🔡 Mostrar texto con `Text` Podemos colocar estes fragmentos no `body` do `Scaffold` ou como fillos doutro widget. ```dart const Text( 'IES San Mamede', textAlign: TextAlign.center, // Centra as liñas dentro do espazo do texto. style: TextStyle( fontSize: 24,…"
url: "https://www.drodicio.com/docs/flutter/tema-2-os-fundamentos-de-flutter-widgets/widgets-de-texto/"
updated: "2026-10-12"
category: Tema 2. Os fundamentos de Flutter. Widgets.
---

# 📝 Texto, iconas e imaxes

## 🔡 Mostrar texto con `Text`

Podemos colocar estes fragmentos no `body` do `Scaffold` ou como fillos doutro widget.

```dart
const Text(
  'IES San Mamede',
  textAlign: TextAlign.center, // Centra as liñas dentro do espazo do texto.
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold, // Texto en negra.
    color: Colors.blue,
  ),
)
```

`textAlign` aliña as liñas dentro do espazo do `Text`; para centrar o widget na pantalla usamos `Center`.

| Parámetro | Para que serve? |
| --- | --- |
| `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` • `TextAlign.center` • `TextAlign.right` • `TextAlign.justify` • `TextAlign.start` / `TextAlign.end` **Exemplo**: `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 final **Exemplo**: `overflow: TextOverflow.ellipsis` |

```dart
const Text(
  'Diego Rodicio é profesor de PMDM e titor de 2º DAM no IES San Mamede.',
  maxLines: 2,
  overflow: TextOverflow.ellipsis, // Engade puntos suspensivos se non cabe.
)
```

### 🎨 `TextStyle`

Podes personalizar a aparencia do texto en Flutter mediante a propiedade `style`, que acepta un obxecto `TextStyle`.

#### 📚 Propiedades máis usadas de `TextStyle`

| Propiedade | Descrición | Exemplo de valor |
| --- | --- | --- |
| `fontSize` | Tamaño en píxeles lóxicos; Flutter adáptao á densidade da pantalla. | `fontSize: 20` |
| `fontWeight` | Grosor da letra. Valores posibles: • `FontWeight.normal` • `FontWeight.bold` • `FontWeight.w100` ata `FontWeight.w900` | `fontWeight: FontWeight.bold` |
| `color` | Cor do texto. Para escoller cores: • Usamos nomes como `Colors.blue`, `Colors.orange` ou `Colors.red`. • Os nomes do código non se traducen. • Tamén hai tonalidades, como `Colors.blue.shade100`. | `color: Colors.green` |
| `fontFamily` | Nome dunha fonte dispoñible na aplicación. Ver «Paquetes e fontes» e «Fontes locais sen paquetes», en «Para saber máis» deste tema. | `fontFamily: 'Roboto'` |
| `letterSpacing` | Espazo extra entre caracteres. | `letterSpacing: 2.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` |

```dart
Text(
  'IES San Mamede - 2º DAM - PMDM',
  style: TextStyle(
    fontSize: 24, // Tamaño da fonte
    fontWeight: FontWeight.bold, // Grosor do texto
    color: Colors.blue, // Cor do texto
    letterSpacing: 1.5, // Espazado entre letras
    decoration: TextDecoration.underline, // Subliñado
    decorationColor: Colors.red, // Cor do subliñado
  ),
)
```

![Personalizar o aspecto dun texto con TextStyle](https://www.drodicio.com/wp-content/uploads/2026/10/widget_text-scaled.png)
Personalizar o aspecto dun texto con TextStyle

## 🔣 Mostrar iconas con `Icon`

A icona pásase como primeiro argumento, sen escribir `icon:`.

```dart
const Icon(
  Icons.school, // Icona relacionada co centro educativo.
  size: 40,
  color: Colors.blue,
  semanticLabel: 'Instituto', // Descrición para lectores de pantalla.
)
```

Escribe `Icons.` en VS Code e consulta as suxestións. Por exemplo: `Icons.home`, `Icons.edit`, `Icons.person` e `Icons.volume_off`.

![Mostrar unha icona de escola con Icon](https://www.drodicio.com/wp-content/uploads/2026/10/icon.png)
Mostrar unha icona de escola con Icon

A referencia da clase `Icons` mostra os nomes dispoñibles en Flutter. A galería de Google Fonts serve para explorar deseños, pero non todos se corresponden directamente cun nome de `Icons`:

> 📚 Consulta:
>
>
>
> - [Icons → `https://api.flutter.dev/flutter/material/Icons-class.html`](https://api.flutter.dev/flutter/material/Icons-class.html).
> - [Galería de iconas de Material Design (Google Fonts) → `https://fonts.google.com/icons`](https://fonts.google.com/icons)

## 🖼️ Imaxes do proxecto: assets

Un **asset** é un recurso que incluímos coa aplicación: unha imaxe, unha fonte ou outro ficheiro.

Para mostrar unha fotografía:

1. Crea `assets/imaxes/` na raíz do proxecto, ao lado de `lib/`.
2. Garda unha imaxe nese cartafol co nome `drodicio.jpg`.
3. Engade a ruta á sección `flutter` que xa existe en `pubspec.yaml`:

```yaml
flutter:
  uses-material-design: true
  assets:
    - assets/imaxes/ # Inclúe as imaxes deste cartafol.
```

Usa espazos para a sangría e non crees outra sección `flutter`. Se gardas imaxes en subcartafoles, declara tamén esas rutas.

Desde a raíz do proxecto, executa:

```bash
flutter pub get
```

Detén e volve executar a aplicación para probar a configuración. Despois coloca este widget no `body`:

```dart
Image.asset(
  'assets/imaxes/drodicio.jpg', // Debe coincidir coa ruta real.
  width: 200,
  height: 150,
  fit: BoxFit.cover, // Enche o espazo; pode recortar a imaxe.
  semanticLabel: 'Diego Rodicio',
)
```

`BoxFit.contain` mostra a imaxe enteira sen deformala, aínda que poida deixar espazo libre. `BoxFit.cover` enche o espazo sen deformala, recortando se é necesario.

![Declarar un asset e mostrar a imaxe con Image.asset](https://www.drodicio.com/wp-content/uploads/2026/10/img-scaled.png)
Declarar un asset e mostrar a imaxe con Image.asset

> 📌 Este exemplo execútase nun proxecto local: o visor de DartPad non ten acceso ao cartafol `assets` do teu ordenador. `Image.asset` non é un construtor `const`.

## 🌐 Imaxes de Internet

`Image.network` recibe a URL da imaxe. Non precisa declarala en `pubspec.yaml` nin instalar o paquete `http`.

```dart
Image.network(
  'https://docs.flutter.dev/assets/images/dash/dash-fainting.gif',
  width: 200,
  height: 150,
  fit: BoxFit.contain,
  // Se a descarga falla, mostramos unha alternativa.
  errorBuilder: (context, erro, traza) {
    return const Text('Non se puido cargar a imaxe');
  },
)
```

![Mostrar unha imaxe de Internet con Image.network](https://www.drodicio.com/wp-content/uploads/2026/10/img_network.png)
Mostrar unha imaxe de Internet con Image.network

O callback `errorBuilder` recibe o contexto, o erro e a súa traza, e debe devolver un widget. Aquí só necesitamos devolver unha mensaxe.

As imaxes de Internet precisan conexión. En web, o servidor da imaxe debe permitir o acceso desde a aplicación; unha URL que abre no navegador pode non funcionar dentro dela. Para distribuír en Android, revisa tamén o permiso de Internet.

## 🧪 Exemplo completo para DartPad

Combina texto, unha icona e unha imaxe de Internet.

> 💡 Retoma este exemplo despois de rematar «Espazos e distribución». Utiliza `Column` para ordenar os elementos e `SingleChildScrollView` para permitir o desprazamento se non caben; ambos se explican nese apartado.
>
>
>
> 🔗 DartPad:
>
>
>
> - [`https://dartpad.dev/?id=2dbd867fa23f97d7f053fc9db64f4308`](https://dartpad.dev/?id=2dbd867fa23f97d7f053fc9db64f4308).

[https://dartpad.dev/embed-inline.html?id=2dbd867fa23f97d7f053fc9db64f4308](https://dartpad.dev/embed-inline.html?id=2dbd867fa23f97d7f053fc9db64f4308)

![Combinar texto, unha imaxe de Internet e unha icona](https://www.drodicio.com/wp-content/uploads/2026/10/exemplos_widgets_texto-scaled.png)
Combinar texto, unha imaxe de Internet e unha icona

> 📚 Consulta:
>
>
>
> - [Text → `https://api.flutter.dev/flutter/widgets/Text-class.html`](https://api.flutter.dev/flutter/widgets/Text-class.html).
> - [Assets e imaxes → `https://docs.flutter.dev/ui/assets/assets-and-images`](https://docs.flutter.dev/ui/assets/assets-and-images).
> - [Imaxes de Internet → `https://docs.flutter.dev/cookbook/images/network-image`](https://docs.flutter.dev/cookbook/images/network-image).