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
.