diegoRodicio

View Categories

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

Tempo de lectura estimado: 2 minutos

📄 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