Problem when trying to set "selected" - ListTile 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
                      });
                  }
              ),),
          ],
        );
      },
    );
  }