Los assets son archivos que empaquetamos junto a nuestra aplicación para usarlos en tiempo de ejecución.
En Flutter, normalmente hablamos de imágenes, iconos, fuentes, ficheros JSON o cualquier recurso estático que queremos llevar dentro de la App. No vienen de internet, no dependen de una API y no aparecen por arte de birlibirloque: hay que declararlos.
Qué es un asset
Un asset es un fichero que vive dentro del proyecto y que Flutter copia al construir la aplicación.
Por ejemplo, podemos tener esta estructura:
assets/
images/
logo.png
avatar.png
data/
config.jsonEl fichero está ahí, sí. Pero Flutter no lo va a incluir automáticamente. Primero hay que registrarlo en el pubspec.yaml.
Declarar assets en pubspec.yaml
El archivo pubspec.yaml es el sitio donde Flutter mira las dependencias y recursos del proyecto. Para añadir assets, usamos la sección flutter.
flutter:
assets:
- assets/images/logo.png
- assets/images/avatar.png
- assets/data/config.jsonTambién podemos declarar una carpeta completa:
flutter:
assets:
- assets/images/Ojo con la indentación en YAML. Dos espacios de más o de menos y Flutter se enfada. Y cuando YAML se enfada, normalmente no te lo explica con cariño.
Usar imágenes en la interfaz
Una vez declarada la imagen, podemos usarla con Image.asset.
Image.asset(
'assets/images/logo.png',
width: 120,
)Esto carga la imagen desde el paquete de la aplicación, sin hacer ninguna petición de red.
Si la imagen viene de internet, entonces usamos Image.network:
Image.network('https://example.com/avatar.png')La diferencia es importante. Image.asset es para recursos locales y Image.network es para recursos remotos.
Añadir fuentes personalizadas
Las fuentes también son assets. Primero las colocamos en una carpeta, por ejemplo:
assets/
fonts/
Montserrat-Regular.ttf
Montserrat-Bold.ttfDespués las declaramos en pubspec.yaml:
flutter:
fonts:
- family: Montserrat
fonts:
- asset: assets/fonts/Montserrat-Regular.ttf
- asset: assets/fonts/Montserrat-Bold.ttf
weight: 700Y ya podemos usarlas desde el tema de la aplicación:
MaterialApp(
theme: ThemeData(
fontFamily: 'Montserrat',
),
home: const HomeScreen(),
)El repositorio Pub.dev
Pub.dev es el repositorio oficial de paquetes de Dart y Flutter.
Si quieres usar HTTP, persistencia, iconos, mapas, sensores o casi cualquier otra función, lo normal es buscar un paquete ahí. Pub.dev muestra la documentación, la puntuación, la compatibilidad y la actividad del paquete.
Añadir un paquete
La forma más cómoda es usar la terminal:
flutter pub add nombre_del_paquetePor ejemplo, para añadir http:
flutter pub add httpEso modifica el pubspec.yaml y añade la dependencia con una versión compatible.
Después la importamos en Dart:
import 'package:http/http.dart' as http;Cómo elegir paquetes
No instales el primer paquete que aparezca sin mirar. En Pub.dev conviene revisar:
- Puntuación y popularidad, para detectar paquetes abandonados.
- Fecha de la última versión, porque Flutter cambia rápido.
- Compatibilidad de plataformas, sobre todo si necesitas web o escritorio.
- Documentación y ejemplos, porque un paquete sin ejemplos suele traer tarde de domingo.
