Problem when trying to set "selected" - ListTile flutter - flutter

Question

i want to make my LIstTile like checkbox, but the problem is when i click one of them, all of the ofthem is selected.
children: <Widget>[
new Expanded(
child:FutureBuilder<List<Workers>>(
future: fetchWorkers(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? WorkerList(workers: snapshot.data)
: Center(child: CircularProgressIndicator());
},
),),
and here is how i get the value from json and show it to my ListTile
Future<List<Workers>> fetchWorkers(http.Client client) async {
final response = await http.post(app_configuration.getUrl() + 'api/Worker/getAll/');
return compute(parseWorkers, response.body);
}
static List<Workers> parseWorkers(String responseBody) {
final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
return parsed.map<Workers>((json) => Workers.fromJson(json)).toList();
}
and Here is my Workers
class Workers {
final String UserId;
final String Fullname;
Workers(
{
this.UserId,
this.Fullname
});
factory Workers.fromJson(Map<String, dynamic> json) {
return Workers(
UserId: json['UserId'] as String,
Fullname: json['Fullname'] as String,
);
}
}
class WorkerList extends StatefulWidget {
#override
_WorkerListState createState() => new _WorkerListState();
final List<Workers> workers;
WorkerList({Key key, #required this.workers}) : super(key: key);
}
class _WorkerListState extends State<WorkerList> {
var isSelected = false;
var mycolor=Colors.white;
#override
Widget build(BuildContext context) {
return ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: widget.workers.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Card(
child: new ListTile(
selected: isSelected,
leading: const Icon(Icons.info),
title: new Text(widget.workers[index].Fullname),
subtitle: new Text(widget.workers[index].UserId),
onTap: toggleSelection // what should I put here,
),),
],
);
},
);
}
void toggleSelection() {
setState(() {
if (isSelected) {
mycolor=Colors.blue;
isSelected = false;
} else {
mycolor=Colors.grey[300];
isSelected = true;
}
});
}
}
Here is the screenshot
How can i fix it ? did i miss something ?

Answer 1

you can do the following:
add a bool inside your Workers class
class Workers {
final String UserId;
final String Fullname;
bool isSelected=false;//the initializtion is mandatory
Workers(
{
this.UserId,
this.Fullname
});
factory Workers.fromJson(Map<String, dynamic> json) {
return Workers(
UserId: json['UserId'] as String,
Fullname: json['Fullname'] as String,
);
}
}
and in the _WorkerListState fix your ListView like this:
#override
Widget build(BuildContext context) {
return ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: widget.workers.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Card(
child: new ListTile(
selected: widget.workers[index].isSelected,
leading: const Icon(Icons.info),
title: new Text(widget.workers[index].Fullname),
subtitle: new Text(widget.workers[index].UserId),
onTap: (){
//this will select the deselected item
//and will deselect the selected item
setState(() {
widget.workers[index].isSelected != widget.workers[index].isSelected
});
}
),),
],
);
},
);
}