🔡 Mostrar texto con Text

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

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.

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

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

🔣 Mostrar iconas con Icon

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

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.

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.
• Galería de iconas de Material Design (Google Fonts) → 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:

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:

flutter pub get

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

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.

📌 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.

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');
  },
)

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.

📚 Consulta:

• Text → https://api.flutter.dev/flutter/widgets/Text-class.html.
• Assets e imaxes → https://docs.flutter.dev/ui/assets/assets-and-images.
• Imaxes de Internet → https://docs.flutter.dev/cookbook/images/network-image.