GetX flutter state is not being updated

Question

I am new to flutter. I just started using GetX flutter package. I am working on a ToDo list app. I am having trouble updating the widget state. What I have done is I have created an AddTaskController that updates the listView state whenever Add item button is clicked. Each list item contains a checkbox. The issue is that I am unable to update the state of list item on click of checkbox. Here's the code: AddTaskController

class AddTaskController extends GetxController {

  RxList<TaskItem> toDoTasksList = RxList([]);

  addTask(TaskItem taskItem) {
    toDoTasksList.add(taskItem);
  }

  removeTask(TaskItem taskItem) {
    toDoTasksList.remove(taskItem);
  }
}

AddTaskScreen

• AddTaskButton

    ElevatedButton.icon(
      onPressed: () {
        TaskItem taskItem = TaskItem(
          taskStatus: TASK_STATUS.TODO,
          isChecked: false,
          taskName: title,
        );
        addTaskController.addTask(taskItem);
      },
      icon: Icon(Icons.add),
      label: Text('Add Item'),
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
      ),
    );

• ListView

    Expanded(
      child: Obx(
        () => ListView.builder(
          itemBuilder: (context, index) {
            return TaskCheckItem(
              value: addTaskController.toDoTasksList[index].isChecked,
              title: addTaskController.toDoTasksList[index].taskName,
              onChanged: (newValue) {
                print(newValue);
                addTaskController.toDoTasksList[index].setChecked(newValue);
              },
              onDownloadClicked: () {},
              onDeleteClicked: () {},
            );
          },
          itemCount: addTaskController.toDoTasksList.length,
        ),
      ),
    );

Answer 1

to update the state you have to add to the value of the list toDoTasksList.add(taskItem); this will not update the state

toDoTasksList.value.add(taskItem); this will update the state

if it didn't work instead of using RxList<TaskItem> toDoTasksList = RxList([]);

just use RxList<TaskItem> toDoTasksList = <TaskItem>[].obs;

i hope this helps you

Answer 2

Always call refresh() method after updating value of Rx variables.

Instead of this

  addTask(TaskItem taskItem) {
    toDoTasksList.add(taskItem);
  }

  removeTask(TaskItem taskItem) {
    toDoTasksList.remove(taskItem);
  }

Try this,

  addTask(TaskItem taskItem) {
    toDoTasksList.add(taskItem);
    toDoTaskList.refresh();     //<----- refresh() call
}

  removeTask(TaskItem taskItem) {
    toDoTasksList.remove(taskItem);
     toDoTaskList.refresh();    //<----- refresh() call
  }

Answer 3

Update the Type for the list in AddTaskController

class AddTaskController extends GetxController {

  final toDoTasksList = Rx<List<TaskItem>>([]);

  addTask(TaskItem taskItem) {
    toDoTasksList.value.add(taskItem);
  }

  removeTask(TaskItem taskItem) {
    toDoTasksList.value.remove(taskItem);
  }
}

*No changes needed in AddTaskButton

Update the callback in your ListView so the state is updated

    Expanded(
      child: Obx(
        () => ListView.builder(
          itemBuilder: (context, index) {
            return TaskCheckItem(
              value: addTaskController.toDoTasksList.value[index].isChecked,
              title: addTaskController.toDoTasksList.value[index].taskName,
              onChanged: (newValue) {
                print(newValue);
                // call update() when changing state of list object
                addTaskController.toDoTasksList.update((value) {
                  value![index].setChecked(newValue);
                },
              },
              onDownloadClicked: () {},
              onDeleteClicked: () {},
            );
          },
          itemCount: addTaskController.toDoTasksList.value.length,
        ),
      ),
    );

This note regarding Get State Management and Lists may be helpful

Answer 4

Call update() in addTask method in the end.

Answer 5

use this please.

class AddTaskController extends GetxController {

    var _toDoTasksList = [].obs;
    List<TaskItem> get toDoTasksList => [..._toDoTasksList];

    addTask(TaskItem taskItem) {
    _toDoTasksList.add(taskItem);
  }

   removeTask(TaskItem taskItem) {
   _toDoTasksList.remove(taskItem);
  }
}

Answer 6

If you work with RxList and you want to force update the state of the page, you need to use yourRxList.refresh() to notify listeners about the changes.