플러터(Flutter)는 크로스 플랫폼 앱 개발을 위한 프레임워크로, 많은 사용자 인터페이스(UI) 요소를 제공합니다. Checkbox는 그 중 하나로, 사용자가 선택 또는 선택 해제할 수 있는 작은 사각형 상자입니다. 하지만 기본적으로 Checkbox는 마우스 클릭을 통해서만 상태를 변경할 수 있습니다. 이번 블로그 포스트에서는 Checkbox의 키보드 단축키를 지원하는 방법에 대해 알아보겠습니다.

Checkbox 키보드 단축키 지원

Checkbox에 키보드 단축키를 지원하기 위해서는 해당 Checkbox에 직접 포커스를 주어야 합니다. 포커스를 주는 방법은 FocusNode를 사용하는 것입니다.

우선 Checkbox 위젯을 만들고, 이에 대한 포커스를 주기 위해 FocusNode를 생성합니다.

FocusNode _checkboxFocus = FocusNode();

다음으로 Checkbox 위젯을 생성하고, onTap 콜백을 통해 포커스를 주도록 합니다.

Checkbox(
  value: isChecked,
  onChanged: (bool newValue) {
    setState(() {
      isChecked = newValue;
    });

    _checkboxFocus.requestFocus(); // 클릭 시 Checkbox에 포커스 주기
  },
)

이렇게 하면 Checkbox를 체크한 후에도 포커스를 유지할 수 있게 됩니다.

키보드 단축키 추가

이제 Checkbox에 키보드 단축키를 추가하는 방법에 대해 알아보겠습니다.

먼저 상위 위젯에서 키 입력을 감지하고 처리하기 위해 RawKeyboardListener를 사용합니다. 이를 통해 사용자의 키 입력을 감지하고, Enter나 Spacebar 키가 눌리면 Checkbox 상태를 변경하는 로직을 구현할 수 있습니다.

RawKeyboardListener(
  focusNode: _checkboxFocus,
  onKey: (RawKeyEvent event) {
    if(event.logicalKey == LogicalKeyboardKey.enter || event.logicalKey == LogicalKeyboardKey.space) {
      setState(() {
        isChecked = !isChecked;
      });
    }
  },
  child: Checkbox(
    value: isChecked,
    onChanged: (bool newValue) {
      setState(() {
        isChecked = newValue;
      });

      _checkboxFocus.requestFocus(); // 클릭 시 Checkbox에 포커스 주기
    },
  ),
),

위 코드에서는 onKey 콜백에서 Enter 또는 Spacebar 키가 눌리면, Checkbox 상태를 토글하도록 구현하였습니다. 이렇게 하면 Checkbox에 체크를 하거나 해제할 수 있게 됩니다.

결론

이번 블로그 포스트에서는 플러터(Flutter) Checkbox에 키보드 단축키를 지원하는 방법을 알아보았습니다. Checkbox에 포커스를 주고, Enter나 Spacebar 키가 눌리면 Checkbox 상태를 변경하도록 로직을 구현하였습니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.