1

Actualmente me encuentro desarrollando una aplicación en Flutter, donde muestro una lista de imágenes a la cual le añadí la opción de que al elegir una imagen el contenedor cambie de color en base al color dominante de la imagen elegida, pero cada que elijo una imagen la lista se refresca 2 o 3 veces (o por lo menos las imágenes vuelven a cargar 2 o 3 veces).

Este es mi código:

class ImageLibrary extends StatefulWidget {
  @override
  _ImageLibrary createState() => _ImageLibrary();
}

class _ImageLibrary extends State<ImageLibrary> with AutomaticKeepAliveClientMixin<ImageLibrary> {
  int? imageSelected;
  Future<List<String>>? imageLibrary;

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    setState(() {
      imageLibrary = getImagesFromRemoteURL();
    });
    super.initState();
  }

  Future<List<String>> getImagesFromRemoteURL() async {
    // Aquí convierto un objeto json a una lista de strings con las url de las images
    return urlImages;
  }
  
  Color getDominantColorFromImage(String url) {
    final ImageProvider image = NetworkImage(url);
    // aquí uso la función de un paquete instalado vía pub,
    // la cual retorna el color dominante de la imagen
    return color;
  }
  
  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      interactive: true,
      Child: FutureBuilder<List<String>>(
        future: imageLibrary,
        builder: (context, AsyncSnapshot snapshot) {
          if (snapshot.data == null) return Center(child: CircularProgressIndicator());
          return ListView.builder(
            itemCount: snapshot.data.length,
            itemBuilder: (_, int index) {
            return Card(
              backgroundColor: imageSelected == index ? getDominantColorFromImage(snapshot.data[index]) : Colors.white,
              child: ListTile(
                onTap: () {
                  setState(() {
                    imageSelected = index; 
                  });
            }));
          });
     }));
  }
}

Otro detalle es que no me carga el color de la imagen, solo me muestra el color por defecto, en este caso Colors.white.

1
  • Si haces un setState, se va a repintar todo el widget y por tanto, la lista se volverá a recrear. Tú valor de índice seleccionado, pertenece a tu Widget y para poder notificiar el cambio a sus hijos, en este caso, la lista, estos "deben repintarse". De todos modos, tienes algunas cosas mejorables en el código, que no te arreglo en una respuesta porque falta mucho código. Por ejemplo, el ¿cuáles son los componentes del ListTile? Seguramente no veas el color de la card, porque está dentrás del ListTile y esto lo tapa.
    – Manuel
    el 12 oct. 2021 a las 19:37

1 respuesta 1

0

El problema que tienes radica en que al hacer el setState en el ListTitle te va a repintar todo el widget completo y por ende el FutureBuilder se ejecutara de nuevo cargando mas imágenes. Lo que te puedo recomendar es que encierres tu Card en un statefullbuilder y solo cambies el estado de ese Widget, de ese modo solo se refrescará tu Card y tu Futurebuilder no cambiará. Algo como esto:

@override
  Widget build(BuildContext context) {
    return Scrollbar(
        interactive: true,
        Child: FutureBuilder<List<String>>(
            future: imageLibrary,
            builder: (context, AsyncSnapshot snapshot) {
              if (snapshot.data == null)
                return Center(child: CircularProgressIndicator());
              return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (_, int index) {
                    return StatefulBuilder(
                      builder: (BuildContext context, setEstado) {
                        return Card(
                            backgroundColor: imageSelected == index
                                ? getDominantColorFromImage(
                                    snapshot.data[index])
                                : Colors.white,
                            child: ListTile(onTap: () {
                              setEstado(() {
                                imageSelected = index;
                              });
                            }));
                        ;
                      },
                    );
                  });
            }));
  }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.