Seguro que más de una vez te has preguntado cómo poner una imagen en Flutter. Si hace poco que has comenzado a trabajar con este software de Google, lo más probable es que todavía no conozcas los entresijos del mismo.
Saber poner imágenes es una de las cosas que te recomendamos aprender lo antes posible. Para ello, te invitamos a leer la guía que hemos preparado, en la cual te presentamos los distintos sistemas de los que puedes sacar partido.
¿Cómo poner imágenes en Flutter? Te vamos a presentar un total de cuatro métodos para que puedas introducir las imágenes en Flutter. Uno de los sistemas suele tener mayor dominancia que el resto, pero nunca viene mal que conozcas todas las opciones que hay a tu disposición.
¿Qué vas a encontrar en este artículo?
Añadir imágenes locales
Tal y como vas a comprobar, es un proceso que no tiene ningún misterio y que recordarás con facilidad una vez lo hayas repetido una o dos veces. Sigue estos pasos:
- Crea la carpeta assets en la raíz de tu proyecto.
- Crea una segunda carpeta, esta es la que utilizarás para las imágenes. Aunque puedas creer que solo puedes llamarla “images”, en realidad puedes usar cualquier nombre, desde “imagenes” hasta “fotos” o lo que se te ocurra.
- Alade las fotos a la carpeta “assets/images” (teniendo en cuenta que la hayas llamado “images”).
- Ahora ve al archivo “pubspec.yaml“ e introduce la ruta de las imágenes con el siguiente código:
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
assets:
- assets/images/bear.png
¿Y si tienes distintas imágenes de las que incluir la ruta en el archivo pubspec.yaml?
En ese caso tienes que hacer una modificación en la última línea y no hacer referencia a una imagen determinada. En lugar de ello incorpora la ruta de la siguiente manera:
assets/images/
Por último, acaba incorporando el código para mostrar imágenes por medio del widget Image.asset() de esta forma:
Column(
children: [
Image.asset('assets/images/lion.png'), //
],
)
¿Cómo añadir y mostrar imágenes en Flutter procedentes de Internet?
Este es un proceso aun más rápido. Sigue estos pasos:
- Añade Image.network() a tu página.
- Dentro de Image.network(), introduce la URL de la imagen online a la cual vas a recurrir.
- Reinicia la aplicación.
Este es un buen sistema porque te permitirá recurrir a cualquier imagen sin tener que invertir tus propios recursos de almacenamiento.
¿Cómo capturar imágenes de Internet para mostrarlas?
Es posible que no te interese depender de la imagen enlazándola tal y como te hemos explicado en el punto anterior. En lugar de ello, quizá quieras capturar la imagen para introducirla en tu propio servidor y que así puedas garantizar su visualización incluso cuando el enlace original esté offline o si estás trabajando sin conexión.
Añade el paquete cached_network_image con el siguiente código:
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
cached_network_image: ^3.2.0
Importa el siguiente paquete:
import 'package:cached_network_image/cached_network_image.dart';
Ahora utiliza el widget CachedNetworkImage para poder visualizar la imagen en cuestión. Hazlo con este código:
CachedNetworkImage(
placeholder: (context, url) => const CircularProgressIndicator(),
imageUrl: 'https://fotos.com/400',
)
Reinicia la aplicación para que los cambios se apliquen.
¿Cómo precargar imágenes en Flutter?
La precarga de las imágenes es un proceso que te vendrá muy bien para que el tiempo de carga se reduzca y que todo sea más inmediato. Cuando precargas las imágenes te aseguras de que estas se cargarán de forma inmediata en el momento en el que la aplicación se cargue.
Primero crea una clase en Flutter que reciba el nombre de AppImages. Puedes hacerlo mediante este código:
class AppImages {
static const String imagesPath = "assets/images/";
static const String lion = imagesPath + "bear.png";
}
Hazte con la referencia de la imagen aplicando el siguiente comando:
Image myImage;
@override
void initState() {
super.initState();
myImage = Image.asset(AppImages.bear);
}
Capta previamente utilizando la función precacheImage()
@override
void didChangeDependencies() {
super.didChangeDependencies();
precacheImage(myImage.image, context); //
}
Muestra las imágenes.
Column(
children: [
Image.asset('assets/images/bear.png'), //
],
)
Termina reiniciando la aplicación.
¿Cómo poner imágenes en Flutter de otras formas alternativas?
En el momento en el que comiences a explorar Flutter y sus muchos widgets, apreciarás que se ponen en tus manos una gran cantidad de formas de mostrar tus imágenes. Por ejemplo, puedes utilizar el widget CircleAvatar, el cual facilita que conviertas cualquier imagen en la forma de un avatar.
Así lograrás que la imagen que hayas elegido se adapte con una forma circular similar a la que usan los avatares de las redes sociales. El código que utilizarías con este widget sería el siguiente:
Row(
children: [
Padding(
padding: EdgeInsets.all(20),
child: CircleAvatar(
backgroundImage: NetworkImage('https://tuweb/images/bear.jpg'),
radius: 70,
),
)
],
)
Lo que consigues con CircleAvatar también está disponible con otros muchos widgets que te aportan métodos alternativos para colocar y visualizar las imágenes. ¡Si exploras las posibilidades de Flutter seguro que te sorprendes!
