diegoRodicio

Está documentación está a túa disposición sin ningún custo económico. Sen embargo, para a súa elaboración dedico moito tempo e recursos, polo que agradecería unha colaboración co que consideres oportuno. Gracias.

View Categories

📦 pubspec.yaml: Xestión de Dependencias e Recursos (Assets)

📄 Propósito do ficheiro pubspec.yaml #

O pubspec.yaml é un ficheiro de configuración escrito en formato YAML (YAML Ain’t Markup Language). É onde defines os metadatos do proxecto, as súas dependencias (librarías) e os recursos (assets como imaxes ou fontes) que a aplicación necesita.

Velaquí unha captura do arquivo pubspec.yaml por defecto ao crear un novo proxecto de Flutter:

📌 pubspec.yaml está na raíz de cada proxecto Flutter e usa formato YAML (indentación con espazos, sen tabulacións!).

pubspec.yaml serve para:

  • Especificar información básica da aplicación (nome, descrición, versión).
  • Declarar as dependencias da aplicación (paquetes Dart/Flutter de pub.dev).
  • Indicar a localización dos recursos (imaxes, audios, fontes) que a aplicación utilizará.
  • Establecer a versión mínima do SDK de Dart que o proxecto require.

🔗 Para saber máis

📚 Engadir e usar paquetes externos (pub.dev) #

Flutter e Dart contan cun amplo ecosistema de paquetes (ou librarías) desenvolvidos pola comunidade, accesibles a través de pub.dev.

  • Estes paquetes permiten ampliar as funcionalidades da túa aplicación (xestión de estado, conexión a internet, animacións, bases de datos, etc.).
  • Para usalos no teu proxecto debes declaralos no ficheiro pubspec.yaml.

💡 Nota: Este proceso explícase con detalle na seguinte sección dos apuntes.

🖼️ Xestión de Recursos (Assets) #

Flutter permite incluír recursos como imaxes, vídeos, audios, ficheiros JSON ou fontes tipográficas, declarándoos no pubspec.yaml.

Os assets son ficheiros que se empaquetan coa túa aplicación no momento da compilación e que están dispoñibles en tempo de execución (por exemplo, imaxes, ficheiros de audio, fontes personalizadas, ficheiros JSON locais).

Para usar assets, primeiro debes declaralos no pubspec.yaml na sección flutter: e despois podes acceder a eles dende o teu código.

🖼️ Engadir imaxes e outros ficheiros multimedia #

Para incluír imaxes ou outros ficheiros multimedia na túa aplicación:

Crea a carpeta dos assets, e dentro dela, a das imaxes #

  • Crea unha carpeta no proxecto para os assets (assets/) e dentro dela outra para as imaxes, no meu caso vou a chamarlle imaxes. Coloca na carpeta creada as túas imaxes:

Declaramos a carpeta de imaxes no pubspec.yaml #

  • Abre o pubspec.yaml e busca a sección flutter:.
  • Descomenta (ou engade) a liña assets: e lista o camiño ao teu directorio de imaxes.

A indentación é crucial (dous espazos despois de flutter:, e despois dous espazos máis para - assets/imaxes/).

Esa parte do teu ficheiro pubspec.yaml debería quedar así:

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ó un ficheiro específico

Visualización dunha imaxe na aplicación #

Para cargar unha imaxe dun asset empregamos:

Image.asset()

//No caso da miña imaxe:
Image.asset('assets/imaxes/drodicio.jpg')
//Opcional: axustar o tamaño:
Image.asset(
              'assets/imaxes/drodicio.jpg',
              width: 200, 
              height: 200,
              fit: BoxFit.cover,
            )

⚠️ Importante: Se te esqueces de declarar o asset no pubspec.yamlou escribes mal a ruta, obterás un erro en tempo de execución.

Así, na miña aplicación:

🔤 Engadir fontes personalizadas #

Para engadir fontes é similar a engadir as imaxes, polo que o vou a explicar máis rápido.

  1. Descarga os ficheiros .ttf ou .otf da fonte.
  2. Colocaos nun cartafol dos assets, como assets/fonts/.
  3. Decláraos no pubspec.yaml, na sección flutter: engadea na liña fonts: tal e como poño abaixo:
flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf

  1. Usa a fonte na aplicación con TextStyle:
Text(
  'Benvido!',
  style: TextStyle(fontFamily: 'Roboto'),
)

🧠 A familia declarada debe coincidir exactamente co nome que uses no código.

📚Máis exemplos e explicacións prácticas #