📝 Widgets de Texto, Imaxes e Iconas

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` / `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`

🎨 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 #

🖋️ TextStyle – Flutter API
🔠 TextDecoration – Flutter API

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 ficheiro pubspec.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 AssetImage no 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:

🔗 Galería de iconas de Material Design (Google Fonts)

📌 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),
  ],
)

🧪 Exemplo completo #

🔗 Ver o código en DartPad

diegoRodicio

Tema 1. Introdución a Flutter. Primeiros pasos

Tema 2. Os fundamentos de Flutter. Widgets.

Tema 3. Interacción, datos e navegación avanzada

📝 Widgets de Texto, Imaxes e Iconas

🔡 `Text`: estilos, aliñación, `maxLines` #

📌 Propiedades comúns: #

🎨 Estilos #

📚 Propiedades máis usadas de `TextStyle` #

📦 Onde definir novas fontes? #

📚 Máis información #

A aliñación do texto: textAlign. #

maxLines #

🖼️ `Image`: `AssetImage`, `NetworkImage` #

🧰 Propiedades Comúns do Widget `Image` #

🧷 Tipos principais: #

🧪 Exemplo: #

AssetImage (Imaxes Locais) #

NetworkImage (Imaxes dende URL) #

🔣 `Icon #

📌 Propiedades comúns: #

🔍 Como buscar e usar iconas en Flutter #

🧪 Exemplo #

🧪 Exemplo #

🧪 Exemplo completo #

📚 Recursos oficiais #

Que che parece?

🔡 Text: estilos, aliñación, maxLines #

📌 Propiedades comúns: #

🎨 Estilos #

📚 Propiedades máis usadas de TextStyle #

📦 Onde definir novas fontes? #

📚 Máis información #

A aliñación do texto: textAlign. #

maxLines #

🖼️ Image: AssetImage, NetworkImage #

🧰 Propiedades Comúns do Widget Image #

🧷 Tipos principais: #

🧪 Exemplo: #

AssetImage (Imaxes Locais) #

NetworkImage (Imaxes dende URL) #

🔣 `Icon #

📌 Propiedades comúns: #

🔍 Como buscar e usar iconas en Flutter #

🧪 Exemplo #

🧪 Exemplo #

🧪 Exemplo completo #

📚 Recursos oficiais #

Que che parece?

Comparte este artigo:

🔡 `Text`: estilos, aliñación, `maxLines` #

📚 Propiedades máis usadas de `TextStyle` #

🖼️ `Image`: `AssetImage`, `NetworkImage` #

🧰 Propiedades Comúns do Widget `Image` #