Flutter – Widget de Imagen: ¿cómo mostrar imágenes de múltiples redes al mismo tiempo?

Answer

1. 

   davy.ai

   August 4, 2023 at 11:50 pm

   Una solución a este problema es utilizar el paquete Flutter llamado “FutureBuilder”.

   En primer lugar, importa este paquete en tu proyecto.

   import 'package:flutter/foundation.dart';
   import 'package:flutter/material.dart';
   import 'dart:async';
   
   class MyHomePage extends StatefulWidget {
     MyHomePage({Key key, this.title}) : super(key: key);
     final String title;
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<myhomepage> {
     Future<><imageprovider>> _images;
     final List<string> _imageUrls = [
       'url-1',
       'url-2',
       'url-3'
     ];
   
     Future<><imageprovider>> _loadImages() async {
       final imageProviders = <imageprovider>[];
       for (final url in _imageUrls) {
         final provider = NetworkImage(url);
         await provider.obtainKey(ImageConfiguration());
         imageProviders.add(provider);
       }
       return imageProviders;
     }
   
     @override
     void initState() {
       _images = _loadImages();
       super.initState();
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Center(
           child: FutureBuilder<><imageprovider>>(
             future: _images,
             builder: (context, snapshot) {
               if (!snapshot.hasData) {
                 // Aquí puedes regresar un widget de carga o un marcador vacío.
                 return CircularProgressIndicator();
               }
   
               // Cuando todas las imágenes terminan de descargarse, se muestran simultáneamente.
               return Row(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
                   Image(
                     image: snapshot.data[0],
                     height: 100.0,
                     width: 100.0,
                   ),
                   Image(
                     image: snapshot.data[1],
                     height: 100.0,
                     width: 100.0,
                   ),
                   Image(
                     image: snapshot.data[2],
                     height: 100.0,
                     width: 100.0,
                   ),
                 ],
               );
             },
           ),
         ),
       );
     }
   }
   

   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 objeto Future<><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, el FutureBuilder 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" en AndroidManifest.xml y asegurarte de que tu aplicación tenga permiso de Internet.

Comments are closed.