[flutter] 플러터 Checkbox 동기화 기능 추가하기

07 Dec 2023

flutter

플러터(Flutter)에서 Checkbox를 사용할 때, 여러 개의 Checkbox 중에서 하나를 선택하고 다른 Checkbox는 선택 해제되도록 동기화 기능을 추가하는 방법에 대해 알아보겠습니다.

일반적으로 Checkbox 그룹을 생성하고 그룹 내에서 하나의 Checkbox를 선택할 때, 다른 Checkbox들은 선택 해제되는 기능이 필요합니다. 이는 사용자가 여러 옵션 중에서 하나를 선택할 수 있는 상황에서 유용하게 사용될 수 있습니다.

체크박스 그룹 생성

먼저, Checkbox 그룹을 생성합니다. Checkbox 리스트를 만들고 상태를 관리하기 위해 List 타입의 변수를 선언합니다.

List<bool> checkboxes = [false, false, false];

Checkbox를 생성하고 그룹 내에서 하나의 Checkbox를 선택했을 때, 다른 Checkbox들이 선택되지 않도록하기 위해 onChanged 콜백 함수를 정의합니다. onChanged 함수에서는 다른 Checkbox들의 상태를 변경해야 합니다.

Checkbox(
  value: checkboxes[0],
  onChanged: (value) {
    setState(() {
      checkboxes[0] = value;
      checkboxes[1] = false;
      checkboxes[2] = false;
    });
  },
),
Checkbox(
  value: checkboxes[1],
  onChanged: (value) {
    setState(() {
      checkboxes[0] = false;
      checkboxes[1] = value;
      checkboxes[2] = false;
    });
  },
),
Checkbox(
  value: checkboxes[2],
  onChanged: (value) {
    setState(() {
      checkboxes[0] = false;
      checkboxes[1] = false;
      checkboxes[2] = value;
    });
  },
),

위 코드에서 setState 함수는 Checkbox 상태가 변경될 때마다 UI를 다시 그리도록 합니다.

동기화 기능 추가하기

Checkbox 그룹이 생성되고 Checkbox 선택 동작이 동작하도록 구현되었습니다. 하지만 코드가 중복되고 반복되는 것을 볼 수 있습니다. 이를 개선하기 위해 Checkbox 그룹의 상태를 관리하고 상태를 업데이트하는 함수를 만들어 보겠습니다.

void updateCheckboxState(int selectedCheckboxIndex) {
  for (var i = 0; i < checkboxes.length; i++) {
    setState(() {
      checkboxes[i] = (i == selectedCheckboxIndex);
    });
  }
}

이제 각 Checkbox에 onChanged 함수를 정의할 때, 위에서 정의한 함수를 사용하면 동기화 기능을 구현할 수 있습니다.

Checkbox(
  value: checkboxes[0],
  onChanged: (value) {
    if (value) {
      updateCheckboxState(0);
    }
  },
),
Checkbox(
  value: checkboxes[1],
  onChanged: (value) {
    if (value) {
      updateCheckboxState(1);
    }
  },
),
Checkbox(
  value: checkboxes[2],
  onChanged: (value) {
    if (value) {
      updateCheckboxState(2);
    }
  },
),

이제 Checkbox를 선택하면 다른 Checkbox들이 선택 해제되는 동기화 기능을 구현할 수 있습니다.

마무리

플러터에서 Checkbox를 사용하다보면 여러 개의 Checkbox 중에서 하나를 선택하고 다른 Checkbox는 선택 해제되도록 동기화 기능을 추가해야 하는 경우가 있습니다. 이를 위해 Checkbox 그룹을 생성하고 onChanged 함수를 정의하여 Checkbox 선택 동작을 구현할 수 있습니다. 또한 중복되는 코드를 개선하기 위해 Checkbox 그룹의 상태를 관리하고 상태를 업데이트하는 함수를 만들어 사용할 수 있습니다. 이렇게 하면 Checkbox 선택 동작을 보다 간편하게 구현할 수 있습니다.

참고 자료:

Flutter Checkbox class documentation