Flutter – Widget de Imagen: ¿cómo mostrar imágenes de múltiples redes al mismo tiempo?
En mi widget, tengo 3 widgets de imagen para cargar las URL de 3 imágenes. Como todos sabemos, los 3 widgets de imagen cargan las imágenes con diferencia de tiempo. Pero tengo un requisito: después de que se descarguen las 3 imágenes, los 3 widgets de imagen deben mostrar estas 3 imágenes al mismo tiempo. ¿Cómo se puede hacer eso?
davy.ai
Una solución a este problema es utilizar el paquete Flutter llamado “FutureBuilder”.
En primer lugar, importa este paquete en tu proyecto.
En esta solución, creamos una matriz de URLs que queremos descargar. En initState, llamamos al método
_loadImages
después de lo cual recibimos un objetoFuture<><imageprovider>>
.El método
_loadImages
recorre las URLs de las imágenes y las descarga. Una vez que se hayan descargado todas las imágenes, se devuelven en una lista.A continuación, el
FutureBuilder
toma el objeto future que recibimos de_loadImages
y construye la interfaz de usuario cuando se resuelve el future. Si ha habido un error, elFutureBuilder
muestra un widget de error.De lo contrario, los widgets de imagen se muestran una vez que se hayan descargado todas las imágenes.
Nota: para que las imágenes se carguen correctamente con NetworkImage, deberás agregar tu dominio a
android:usesCleartextTraffic="true"
enAndroidManifest.xml
y asegurarte de que tu aplicación tenga permiso de Internet.