capitan apps

Tiempo de lectura: 6 minutos

Para mostrar una imagen en Flutter podemos hacerlo mediante dos widgets diferentes:

Image: Es un widget sin estado, (así como lo son Text o Button) y lo utilizamos cuando queremos mostrar imágenes en la pantalla que permanecerán sin alterarse en el transcurso de vida de la app.

ImageProvider: Es el widget que utilizamos cuando deseamos cambiar las propiedades de la imagen como puede ser sustituir la imagen, cambiar su forma o su color.

Para mostrar la imagen en la pantalla estaremos usando nuestro código base que creamos en el post “Conoce los principales componentes de tu aplicación”

Mostremos una imagen guardada localmente

Para mostrar una imagen que se almacenará como parte de los recursos del proyecto, debemos de crear una carpeta especial donde estaremos guardando todos los recursos propios de la aplicación.

En la estructura del proyecto, debemos crear la nueva carpeta assets la cual contendrá todos los tipos diferentes de recursos para nuestra aplicación. Dentro de esta carpeta assets crearemos una nueva carpeta, la cuál llamaremos img y se encargará de almacenar solo imágenes.

Quedando organizadas de la siguiente forma:

hello_app
   ↳android
   ↳ios
   ↳assets
     ↳img
   ↳lib
     ↳main.dart 
   ↳test
   ↳web
pubspec.yaml

Dentro del folder assets/img tendremos que incluir cada una de las imágenes que estaremos usando en la aplicación. En este caso voy a agregar una imagen de mi perro Batman, quedando organizada de la siguiente manera:

hello_app
   ↳android
   ↳ios
   ↳assets
     ↳img
       ↳batman-scaled.jpg
   ↳lib
     ↳main.dart 
   ↳test
   ↳web
pubspec.yaml

Puedes descargar la imagen de ejemplo en esta url: https://capitanapps.com/wp-content/uploads/2021/03/batman-scaled.jpg

Después de crear la carpeta img tenemos que indicarle a Flutter cuáles son las imágenes que deseamos utilizar en el proyecto, para esto debemos de modificar nuestro archivo pubspec.yaml e indicarle las rutas y los nombres de los archivos que se encuentran en la carpeta img. Esto lo hacemos buscando en el archivo pubspec.yaml la línea que dice flutter: y debajo de ella agregar la ruta exacta de la imagen de la siguiente manera:

...
    flutter:
      assets: [
        assets/img/batman-scaled.jpg
      ]
...

Si deseamos agregar más imágenes hay que realizar el mismo procedimiento, agregar la imagen en la carpeta img y después indicarle a Flutter la ruta con la nueva imagen.

...
    flutter:
      assets: [
        assets/img/batman-scaled.jpg
        assets/img/mi-nueva-imagen.jpg
      ]
...

Después de agregar nuestra imagen el archivo pubspec.yaml quedaría de la siguiente manera:

hello_app/pubspec.yaml

Ya que hemos terminado de definir las imágenes que vamos a estar utilizando en nuestra app, el siguiente paso es centrarnos en trabajar el archivo lib/main.dart el cual, como ya habíamos visto, es el encargado de construir y mostrar nuestra aplicación. Para mostrar una imagen agregaremos el siguiente código:

Image.asset("assets/img/batman-scaled.jpg")

El archivo completo de main.dart quedará de la siguiente manera:

hello_app/lib/main.dart

Después de hacer estos cambios la imagen debe de aparecer en la aplicación. Para comprobar que esté funcionado debemos de ejecutar la aplicación como lo vimos anteriormente en el post ¡Crea tu proyecto! Flutter (donde aprendimos a ejecutarla desde la terminal) y Conoce los principales componentes de tu aplicación (donde aprendimos cómo ejecutarla desde el IDE), mostrándose nuestra imagen de la siguiente manera:

¡Ya tienen el gusto de conocer a mi perro Batman! si lo ven por la calle salúdenlo, le encanta tener amigos.



Ahora exploremos qué tipo de personalización tenemos disponible para la imagen.

Cambiemos el tamaño:

Image.asset(
   "assets/img/batman-scaled.jpg",
    width: 50, height: 50)
Image.asset(
   "assets/img/batman-scaled.jpg",
    width: 1000, height: 1000)

Cuando cambiamos el tamaño notamos que se han creado espacios vacíos en la parte superior y en la parte inferior de la pantalla. Para que la imagen cubra absolutamente toda la pantalla usaremos la propiedad fit la cual se encargará de ajustar la imagen.

Image.asset(
   "assets/img/batman-scaled.jpg",
   fit: BoxFit.cover,
   width: 1000, height: 1000)

La propiedad fit: puede contener las siguientes configuraciones: fill, contain, cover, fitWidth, fitHeight, none, scaleDown. Te recomiendo que pruebes cada una y veas cómo afectan la visualización de la imagen en la aplicación.

Usemos un recurso remoto

Para mostrar una imagen que no está guardada en la carpeta de assets, usaremos el mismo widget Image pero en esta ocasión lo declararemos de la siguiente forma:

Image.network(
         "https://www.freecodecamp.org/news/content/images/2020/04/android11-preview.jpg")

Para probar los recursos remotos te sugiero utilizar el explorador de internet o algún dispositivo Android ya que iPhone/Mac necesita configuraciones adicionales que veremos en liberando nuestra aplicación a producción.

¿Y si quiero hacer una imagen redonda o cuadrada?

Para que una imagen pueda tener una forma determinada debemos utilizar un widget de tipo ImageProvider ya que nos permitirá cambiar propiedades de la imagen (a diferencia del widget Image que sólo sirve para imágenes estáticas). Para definir la forma deseada utilizaremos el widget Container (Contenedor en español) el cual se encargará de transformar el marco de la imagen en cualquier figura que se le asigne.

El primer paso para crear la transformación de la imagen a cualquier forma lo hacemos mediante el widget Container. Como ejemplo creemos un contenedor de 300 x 300 dp con un fondo púrpura para poder distinguirlo en la pantalla.

Container(
  width: 300,
  height: 300,
  color: Colors.purple
)

Ahora mediante la propiedad decoration: podremos cambiar la forma del contenedor. Usando el widget BoxDecoration Flutter nos da 2 opciones predefinidas que son rectángulo (rectangle) y círculo (circle). Utilicemos el círculo.

Container(
  width: 300,
  height: 300,
  decoration: BoxDecoration(
    color: Colors.purple, 
    shape: BoxShape.circle
  )
)

El widget BoxDecoration cuenta con la propiedad image para asignar la imagen que queremos cargar en el contenedor. Para cargar una imagen local utilizamos AssetImage, mientras que si deseamos obtenerla desde internet debemos utilizar NetworkImage. Tanto NetworkImage como AssetImage son widgets de tipo ImageProvider. En este ejemplo utilizaremos una imagen desde nuestra carpeta de recursos por lo que requeriremos el widget AssetImage:

Container(
  width: 300,
  height: 300,
  decoration: BoxDecoration(
    color: Colors.purple,
    shape: BoxShape.circle,
    image: DecorationImage(
      image: AssetImage(
        "assets/img/batman-scaled.jpg"
      ), //AssetImage
      fit: BoxFit.cover
    ) // DecorationImage
  ) // BoxDecoration
) // Container

Las // indican comentarios para la aplicación. Un comentario es un bloque de texto que no es compilado y sirve para dejar una anotación en el código. En este ejemplo los utilicé para tener orden y saber cómo se van cerrando los widgets. Si quieres saber más sobre este tipo de componentes revisa nuestro curso básico de Dart (Próximamente).

Así es como queda nuestro código completo para mostrar una imagen redonda en nuestra aplicación con Flutter.

hello_app/lib/main.dart

Con esto cerramos este post sobre imágenes, en el cual aprendiste las maneras en que podemos cargar nuestros propios recursos en la aplicación, ya sea mediante recursos locales o de internet, además vimos un poco de contenedores y formas. No te preocupes, en próximos post estaremos aumentando el detalle de estas propiedades.



¿Te está gustando este curso? Aquí hay más temas que otras personas están viendo en este momento.

Recommended Reads