I have a listview loaded from API using GetX. Listview has a checkbox so that I can select multiple list items. I can select list items and can add them to another list. But I am not able to show the selected list item (by changing the color of the checkbox to green) in the UI. If I use SetState(), I can. But I want to use GetX.
//My GetXController code...
class TeamController extends GetxController { var isLoading = true.obs; var teamList = <Team>[].obs; List<Team> selectedTeam = <Team>[].obs; var isSelected = false.obs; @override void onInit() { fetchTeam(); super.onInit(); } void fetchTeam() async { try { isLoading(true); var team = await TeamApi.fetchTeam(); if (team != null) { teamList.assignAll(team); } } finally { isLoading(false); } } void selectTeam( {required String firstName, required String lastName, required int userType, required String id, required bool isChecked, required int index}) { isSelected(isChecked); teamList[index].isSelected = isChecked; if (isChecked == true) { selectedTeam.add(Team( firstName: firstName, lastName: lastName, userType: userType, isSelected: isChecked, id: id)); } else if (isChecked == false) { selectedTeam.removeWhere((element) => element.id == id); } for (var element in selectedTeam) { log(element.firstName.toString()); } }}//Page where Listview is placed....
Container( constraints: BoxConstraints(maxHeight: 200), decoration: BoxDecoration( border: Border.all(width: 3), borderRadius: BorderRadius.circular(12), color: Colors.blue.shade100), height: 200, child: teamController.isLoading.value ? Center( child: CircularProgressIndicator(), ) : ListView.builder( physics: ScrollPhysics(), itemCount: teamController.teamList.length, shrinkWrap: true, primary: false, scrollDirection: Axis.vertical, itemBuilder: ((context, index) { return Obx(() => ListTile( style: ListTileStyle.list, dense: true, title: Text("${teamController.teamList[index].firstName.toString()} ${teamController.teamList[index].lastName.toString()}", style: TextStyle(fontSize: 18), ), subtitle: Text(teamController .teamList[index].isSelected .toString()), trailing: teamController.teamList[index].isSelected! ? Icon( Icons.check_circle, color: Colors.green[700], ) : Icon( Icons.check_circle_outline, color: Colors.white, ), onTap: () { isChecked = teamController .teamList[index].isSelected = !teamController.teamList[index].isSelected!; teamController.selectTeam( firstName: teamController .teamList[index].firstName .toString(), lastName: teamController .teamList[index].lastName .toString(), userType: int.parse(teamController .teamList[index].userType .toString()), id: teamController.teamList[index].id .toString(), isChecked: isChecked, index: index);}, )); }), ), ),The issue is Checkbox Icon is not becoming green unless I use SetState() which makes my GetX stateManagement useless. If there is any better way to use checked listview or any possibility to correct my code? Can anyone refer to any tutorials?
Can anyone help me please?