플러터에서 Checkbox는 기본적으로 표준 체크박스 스타일을 가지고 있습니다. 하지만 사용자 정의 스타일을 적용하고 싶을 때가 있습니다. 이 글에서는 플러터 Checkbox의 모양과 스타일을 변경하는 방법을 알아보겠습니다.

1. Checkbox 모양 변경하기

Checkbox의 모양을 변경하는 방법은 여러 가지가 있습니다. 가장 간단한 방법은 shape 속성을 사용하는 것입니다. shape 속성을 사용하여 Checkbox의 테두리를 둥글게 만들거나, 다양한 모양을 적용할 수 있습니다.

Checkbox(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8.0),
  ),
  value: isChecked,
  onChanged: (bool newValue) {
    setState(() {
      isChecked = newValue;
    });
  },
);

위의 코드에서는 shape 속성을 사용하여 Checkbox의 모양을 둥글게 만들어 줍니다. RoundedRectangleBorder를 사용하고, borderRadius 속성을 통해 둥글게 만들고 싶은 각도를 설정할 수 있습니다.

2. Checkbox 스타일 변경하기

Checkbox의 스타일을 변경하는 방법도 다양합니다. 가장 일반적인 방법은 activeColor와 checkColor 속성을 사용하여 Checkbox의 색상을 변경하는 것입니다.

Checkbox(
  activeColor: Colors.blue,
  checkColor: Colors.white,
  value: isChecked,
  onChanged: (bool newValue) {
    setState(() {
      isChecked = newValue;
    });
  },
);

위의 코드에서는 activeColor 속성을 사용하여 Checkbox가 선택되었을 때의 배경색을 변경하고, checkColor 속성을 사용하여 체크 마크의 색상을 변경합니다.

또한, tileColor 속성을 사용하여 Checkbox의 타일 배경색을 변경할 수도 있습니다.

Checkbox(
  tileColor: Colors.red,
  value: isChecked,
  onChanged: (bool newValue) {
    setState(() {
      isChecked = newValue;
    });
  },
);

위의 코드에서는 tileColor 속성을 사용하여 Checkbox의 타일 배경색을 빨간색으로 변경합니다.

3. Checkbox 아이콘 변경하기

Checkbox의 아이콘을 변경하는 방법도 있습니다. 플러터에서 제공하는 아이콘을 사용하거나, 사용자 정의 아이콘을 사용할 수 있습니다.

Checkbox(
  value: isChecked,
  onChanged: (bool newValue) {
    setState(() {
      isChecked = newValue;
    });
  },
  // Flutter에서 제공하는 아이콘 사용
  // activeIcon: Icons.check,
  // inactiveIcon: Icons.close,
  // 사용자 정의 아이콘 사용
  activeIcon: Icon(Icons.check, color: Colors.green),
  inactiveIcon: Icon(Icons.close, color: Colors.red),
);

위의 코드에서는 activeIcon과 inactiveIcon 속성을 사용하여 Checkbox가 선택되었을 때와 선택되지 않았을 때의 아이콘을 변경합니다. 플러터에서 제공하는 아이콘을 사용하거나, 사용자 정의 아이콘을 사용할 수 있습니다.

위의 예시에서는 플러터에서 제공하는 Icons 클래스의 아이콘을 사용하였으나, 사용자 정의 아이콘을 사용해도 됩니다. Icon 위젯을 사용하여 아이콘을 정의하면 됩니다.

마치며

위의 방법들을 사용하여 플러터 Checkbox의 모양과 스타일을 변경할 수 있습니다. 제공된 예시를 참고하여 원하는 스타일을 적용해보세요! 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.