Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Checkbox Checks All The Tasks Instead of The Relevant One Only

  taskContainer(String taskName, String taskPriority, String taskDetails) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10),
      child: Container(
        height: 80,
        decoration: BoxDecoration(
          color: Colours().containerColour,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: Colours().buttonShadow,
              blurRadius: 5,
              offset: const Offset(0, 5),
            ),
          ],
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                Container(
                  width: 10,
                  decoration: BoxDecoration(
                    color: taskPriority == 'High'
                        ? Colours().highPriority
                        : taskPriority == 'Medium'
                            ? Colours().mediumPriority
                            : Colours().lowPriority,
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(10),
                      bottomLeft: Radius.circular(10),
                    ),
                  ),
                ),
                SizedBox(width: MediaQuery.of(context).size.width * 0.04),
                //check box
                Checkbox(
                  value: isSelectedList,
                  onChanged: (bool? value) {
                    setState(
                      () {
                        isSelectedList = value!;
                        print('task status: $isSelectedList');
                      },
                    );
                  },
                  activeColor: Colours().checkedColour,
                  checkColor: Colours().primary,
                ),
                SizedBox(width: MediaQuery.of(context).size.width * 0.04),
                Padding(
                  padding: const EdgeInsets.only(top: 5),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        taskName,
                        style: GoogleFonts.ubuntu(
                          fontSize: 22,
                          //fontWeight: FontWeight.bold,
                          color: isSelectedList
                              ? Colours().checkedColour
                              : Colours().unSelectedText,
                        ),
                      ),
                      const SizedBox(height: 5),
                      Text(
                        '$taskPriority Priority',
                        style: GoogleFonts.ubuntu(
                          fontSize: 18,
                          //fontWeight: FontWeight.bold,
                          color: isSelectedList
                              ? Colours().checkedColour
                              : Colours().unSelectedText,
                        ),
                      ),
                    ],
                  ),
                ),
                //SizedBox(width: MediaQuery.of(context).size.width * 0.04),
              ],
            ),
            IconButton(
              onPressed: () {
                isSelectedList
                    ? deleteTask(
                        taskName,
                        taskPriority,
                        taskDetails,
                      )
                    : showTaskDetails(
                        taskName,
                        taskPriority,
                        taskDetails,
                      );
              },
              icon: isSelectedList
                  ? Icon(
                      Icons.delete,
                      color: Colors.grey.shade400,
                      size: 35,
                    )
                  : Icon(
                      Icons.more_vert,
                      color: Colors.grey.shade400,
                      size: 35,
                    ),
            ),
          ],
        ),
      ),
    );
  }

This is a code snippet of a task tracker application. The relevant parameters are passed on to this method from a ListView.builder, which is in the main UI widjet tree. It retrieves the tasks from firestore and then passes the relevant details to create the task card. It creates the task cards correctly.

Problem is, when user clicks a checkbox it marks all the check boxes in all the tasks, not that relevant one only. How can I rectify this?

Tags:

2

Answers


  1. 0

    Your (outer) state should contain a list of booleans to indicate whether they are selected, not a single boolean for the whole list.

    Then, you can pass a boolean isSelected to each tile, which is the boolean at the current index of the List<bool> isSelectedList, and set the value at this index when the item is selected.

    Login or Signup to reply.
  2. 0

    The problem is that you are using the same variable isSelectedList to check the state of all checkbox, once you click on any checkbox that value will change for all tasks.

    You can create a list of bool for all your tasks

    List isSelectedList;

    In your method you can pass the index of the task

    taskContainer(String taskName, String taskPriority, String taskDetails, int index) {
    ...
}

    Then to change or check the value, use that array and that index

    Checkbox(
    value: isSelectedList[index],
    onChanged: (bool? value) {
        setState(() {
            isSelectedList[index] = value!;
            print('task $index status: ${isSelectedList[index]}');
        },
        );
    },
    activeColor: Colours().checkedColour,
    checkColor: Colours().primary,
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search