Flutter — Widgets de activos

En esta oportunidad veremos sobre los widgets que administran activos (AssetBundle), los que podemos usar para mostrar imágenes (Imagen) y los de mostrar íconos (Icon).

AssetBundle

Con este widget podemos acceder a recursos, como imágenes y cadenas, que se pueden usar en una aplicación Flutter. El acceso a estos recursos es asíncrono para que se puedan cargar mejor cuando son de una red externa o desde los archivos locales para no bloquear la aplicación.

rootBundle

Es el paquete raíz de los recursos que se empaquetaron al compilar la aplicación. Para agregar recursos debe hacerse en el archivo pubspec.yaml en la sección assets dentro de flutter .

name: my_app
flutter:
  assets:
   - assets/images/dash-fainting.gif
   - assets/images/dashatars.png

Configuración

debemos agregar la configuración anterior, además de eso se deben crear las carpetas correspondientes, es decir, la carpeta assets en la raíz del proyecto y dentro la carpeta images que va a contener las imágenes.

Image

Es un widget que muestra una imagen. Tiene varios constructores para distintas formas de cargar la imagen.

Constructores

• Image.new este constructor se apoya en la clase ImageProvider para obtener una imagen.
• Image.asset se obtiene la imagen de un AssetBundle por medio de una llave o clave.
• Image.network con este constructor podemos obtener una imagen por medio de una URL.
• Image.file con este constructor podemos obtener una imagen de un archivo, utilizando la clase File.
• Image.memory con este constructor podemos obtener una imagen por medio de la clase Uint8List.

Formatos

Los formatos de imagen admitidos son: JPE, PNG, GIF, GIF animado, WebP, WebP animado, BMP, WBPM. 

Errores

En caso de que no encuentre la URL de la imagen o el formato es incorrecto, algún tipo de error, este widget nos brinda un método para nosotros manejar estas situaciones errorBuilder el cual devuelve un widget.

Ejemplo

Vamos a usar algunos de los constructores que tiene Image.

// Usando el constructor Image.new y la clase AssetImage
const Image(
  height: 200,
  width: 300,
  image: AssetImage('assets/images/dash-fainting.gif'),
),
// Usando el constructor Image.asset
Image.asset(
  'assets/images/dashatars.png',
  height: 200,
  width: 300,
),
// Usando el constructor Image.network
Image.network(
  url,
  height: 200,
  width: 300,
),
const SizedBox(
  height: 20,
),
// Usando el constructor Image.network con errorBuilder
Image.network(
  errorBuilder: (context, error, stackTrace) => Text(
    '$error',
    style: const TextStyle(color: Colors.red),
  ),
  formatInvalid,
),

Demostración

Icon

Es un widget por medio del cual podemos hacer uso de íconos, apoyándose en la clase IconData donde se puede especificar el FontFamily . Inicialmente podemos usar los íconos predefinidos de Material Icons. Para esto recordemos que es necesario tener activada la opción en el pubspec.yaml .

name: my_app
flutter:
  uses-material-design: true

Ejemplo

Veremos unos ejemplos de íconos utilizando algunas de sus propiedades.

• icon que es de tipo IconData, es el ícono como tal que queremos mostrar.
• color el color que va tener el relleno del ícono.
• size el tamaño en pixeles del ícono.
• shadows si queremos agregar un sombreado.

const Icon(
  Icons.warning,
  color: Colors.yellow,
  size: 40.0,
  shadows: [Shadow(blurRadius: 20, offset: Offset(10, 10))],
),
const Icon(
  Icons.info,
  color: Colors.blue,
  size: 35.0,
),
const Icon(
  Icons.cancel,
  color: Colors.red,
  size: 35.0,
),

Demostración

Código fuente

• https://github.com/jaimetellezb/widget-catalog/tree/feature/assets-widgets

Conclusión

Como pudimos ver para usar assets dentro de nuestro proyecto debemos hacer un par de configuraciones iniciales pero resulta ser bastante sencillo en la práctica, también tenemos opciones de acceder a recursos en la web, unos widgets bastante interesantes y con buen uso en las aplicaciones de Flutter.

¡¡¡Gracias por leer este artículo!!!

Referencias

• https://docs.flutter.dev/ui/widgets/assets