[ Flutter Widget ] 플러터 기본위젯 - Checkbox

Flutter 기본위젯 - Checkbox 위젯

 

Checkbox() 함수 원형

const Checkbox({
  Key? key,
  required bool value,
  required ValueChanged<bool?>? onChanged,
  Color? activeColor,
  Color? checkColor,
  Color? focusColor,
  Color? hoverColor,
  MaterialStateProperty<Color?>? fillColor,
  MouseCursor? mouseCursor,
  bool tristate = false,
  FocusNode? focusNode,
  bool autofocus = false,
  MaterialTapTargetSize? materialTapTargetSize,
  VisualDensity? visualDensity,
  OutlinedBorder? shape,
  BorderSide? side,
})

 

매개변수 상세 설명

1. value (필수)

설명: 체크박스의 현재 상태를 나타냅니다.

• true: 체크됨.
• false: 체크되지 않음.

타입: bool

value: true,

 

2. onChanged (필수)

설명: 체크박스 상태가 변경될 때 호출되는 콜백 함수.

• null로 설정하면 체크박스가 비활성화됩니다.

타입: ValueChanged<bool?>?

onChanged: (newValue) {
  print('Checkbox is now: $newValue');
},

 

3. activeColor

설명: 체크박스가 선택된 상태에서 나타나는 박스의 배경 색상.

타입: Color?

activeColor: Colors.blue,

4. checkColor

설명: 체크 표시(✔)의 색상.

타입: Color?

checkColor: Colors.white,

5. focusColor

설명: 체크박스가 포커스를 받을 때 표시되는 색상.

타입: Color?

focusColor: Colors.green,

6. hoverColor

설명: 체크박스 위에 마우스 포인터가 올라갔을 때 표시되는 색상.

타입: Color?

hoverColor: Colors.orange,

7. fillColor

설명: 체크박스 배경 색상을 상태별로 설정할 수 있는 속성.

타입: MaterialStateProperty<Color?>?

fillColor: MaterialStateProperty.resolveWith((states) {
  if (states.contains(MaterialState.selected)) {
    return Colors.red;
  }
  return Colors.grey;
}),

8. mouseCursor
설명: 체크박스 위에 마우스가 있을 때 커서를 변경합니다.
타입: MouseCursor?

mouseCursor: SystemMouseCursors.click,

9. tristate
설명: 체크박스가 세 가지 상태(true, false, null)를 가질 수 있도록 설정합니다.
타입: bool
기본값: false

tristate: true, // null 상태를 허용

10. focusNode
설명: 포커스를 관리하는 노드.
타입: FocusNode?

focusNode: FocusNode(),

11. autofocus
설명: 체크박스가 처음 렌더링될 때 자동으로 포커스를 받을지 여부를 결정합니다.
타입: bool
기본값: false

autofocus: true,

12. materialTapTargetSize

설명: 체크박스의 터치 대상 크기를 설정합니다.

타입: MaterialTapTargetSize?

• MaterialTapTargetSize.padded: 터치 영역을 크게 만듭니다.
• MaterialTapTargetSize.shrinkWrap: 터치 영역을 체크박스 크기에 맞춥니다.

materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,

13. visualDensity
설명: 체크박스의 밀도를 설정합니다.
타입: VisualDensity?

visualDensity: VisualDensity.compact,

14. shape
설명: 체크박스의 외곽 모양을 정의합니다.
타입: OutlinedBorder?

shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),

15. side
설명: 체크박스 외곽선의 스타일을 설정합니다.
타입: BorderSide?

side: BorderSide(color: Colors.blue, width: 2),

샘플예제

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Checkbox Full Example'),
        ),
        body: const Padding(
          padding: EdgeInsets.all(16.0),
          child: CheckboxExample(),
        ),
      ),
    );
  }
}

class CheckboxExample extends StatefulWidget {
  const CheckboxExample({super.key});

  @override
  State<CheckboxExample> createState() => _CheckboxExampleState();
}

class _CheckboxExampleState extends State<CheckboxExample> {
  bool? _value = false; // 현재 체크박스 상태
  FocusNode _focusNode = FocusNode(); // 포커스 상태 제어

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Checkbox(
          value: _value, // 현재 상태 (true, false, null)
          onChanged: (bool? newValue) {
            // 상태 변경 이벤트
            setState(() {
              _value = newValue;
            });
          },
          activeColor: Colors.green, // 체크된 상태의 배경 색상
          checkColor: Colors.white, // 체크 표시 색상
          focusColor: Colors.red, // 포커스 상태 색상
          hoverColor: Colors.yellow, // 마우스 호버 색상
          fillColor: MaterialStateProperty.resolveWith((states) {
            if (states.contains(MaterialState.selected)) {
              return Colors.purple; // 선택 시 색상
            }
            return Colors.grey; // 선택되지 않은 경우 색상
          }),
          mouseCursor: SystemMouseCursors.click, // 마우스 커서 스타일
          tristate: true, // null 상태 허용
          focusNode: _focusNode, // 포커스 노드
          autofocus: true, // 자동 포커스 활성화
          materialTapTargetSize: MaterialTapTargetSize.padded, // 터치 대상 크기
          visualDensity: VisualDensity.adaptivePlatformDensity, // 밀도 설정
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(4), // 둥근 외곽선
          ),
          side: BorderSide(color: Colors.blue, width: 2), // 외곽선 스타일
        ),
        SizedBox(height: 20),
        Text('Checkbox Value: ${_value == null ? "Null" : _value}'),
        ElevatedButton(
          onPressed: () {
            _focusNode.requestFocus(); // 포커스를 체크박스로 이동
          },
          child: Text('Focus on Checkbox'),
        ),
      ],
    );
  }
}

 

1. 체크박스 상태 변경

• onChanged를 통해 체크 상태를 변경.
• tristate를 통해 세 가지 상태(true, false, null) 지원.

 

2. 스타일 커스터마이징:

• fillColor, activeColor, checkColor, hoverColor, focusColor로 시각적 스타일 조정.
• shape와 side를 활용한 외곽선 스타일링.

 

3. 포커스 및 상호작용:

• FocusNode와 autofocus를 통해 포커스 제어.
• mouseCursor를 사용해 사용자 경험 강화.