How to use deleted method in ListView builder in flutter? - flutter

Question

I am using two apis, one is to use get method which I am using to fetch Image from server and display using ListView builder, and another api which I need to use to delete the image.
This model class is for Fetching data:
List<DisplayImageModels> displayImageModelsFromJson(String str) =>
List<DisplayImageModels>.from(
json.decode(str).map((x) => DisplayImageModels.fromJson(x)));
String displayImageModelsToJson(List<DisplayImageModels> data) =>
json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class DisplayImageModels {
DisplayImageModels({
this.id,
this.category,
this.documentImage,
this.document,
this.user,
});
int? id;
int? category;
String? documentImage;
int? document;
int? user;
factory DisplayImageModels.fromJson(Map<String, dynamic> json) =>
DisplayImageModels(
id: json["id"],
category: json["category"],
documentImage: json["document_image"],
document: json["document"],
user: json["user"],
);
Map<String, dynamic> toJson() => {
"id": id,
"category": category,
"document_image": documentImage,
"document": document,
"user": user,
};
}
This is model class for delete method
DeleteImageModels deleteImageModelsFromJson(String str) =>
DeleteImageModels.fromJson(json.decode(str));
String deleteImageModelsToJson(DeleteImageModels data) =>
json.encode(data.toJson());
class DeleteImageModels {
DeleteImageModels({
required this.ids,
});
List<int> ids;
factory DeleteImageModels.fromJson(Map<String, dynamic> json) =>
DeleteImageModels(
ids: List<int>.from(json["ids"].map((x) => x)),
);
Map<String, dynamic> toJson() => {
"ids": List<dynamic>.from(ids.map((x) => x)),
};
}
And this is API class for Delete method, which apparently is throwing exception
Future<DeleteImageModels> deleteAlbum() async {
var preferences = await SharedPreferences
.getInstance(); // This is Shared preference which is used to store the tokens of the users
var getToken = preferences.getString("token");
print("This is access: $getToken");
final http.Response response = await http.delete(
Uri.parse('http://10.0.2.2:8000/api_vi/deletedocument/'),
headers: {
'Context-Type': 'application/json',
'Accept': 'application/json',
'Authorization': 'Bearer $getToken',
},
);
if (response.statusCode == 200) {
return DeleteImageModels.fromJson(jsonDecode(response.body));
} else {
// If the server did not return a "200 OK response",
// then throw an exception.
throw Exception('Failed to delete album.');
}
}
}
The id is only common thing between two models and I am supposed to delete using that id, now how do I do it? I did go through flutter official documents for deleting but it doesn't relate to mine.
Here in this image below we can see some numbers on the image, those are id which is displayed from get API now how do I pass that ID in delete api and and delete those image?

Answer 1

AFAIK your question is how to pass the image id by clicking on the remove icon.
If you are using the List.builder for representing your images then in the end you must return a widget that represents your image. This widget must contain id of image and pressable button where you can register click handler. You can place logic responsible for deleting the image inside of this handler.
I make a brief example that highlights the main points here.
Image widget example
class ImageWidget extends StatelessWidget {
final String id;
final String url;
ImageWidget(this.id, this.url);
#override
Widget build(BuildContext context) {
return SizedBox(
width: 64,
height: 64,
child: Stack(children: [
Positioned(child: IconButton(icon: ..., onPressed: {
// here delete logic
// api.deleteImgae(id);
},)),
Positioned.fill(child: Image(image: image))
],),
)
}
}
You can specify delete logic in onPressed callback of IconButton or any other (InkWell, GestureDetector, ElevatedButton and etc)
ListView example:
ListView.builder(itemBuilder: (_, i) => ImageWidget(images[i].id, images[i].url))