> For the complete documentation index, see [llms.txt](https://developer.aliothx.net/start/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.aliothx.net/start/uiux/ui-ux/checkbox.md).

# 체크박스 (CheckBox)

## **AgnesCheckBoxGroup**

<figure><img src="/files/kjsE4DpE3Ul8OkI8y2yo" alt=""><figcaption></figcaption></figure>

### Wrap

![](/files/9WoVn8To2laQuSbUb9Yk)

```dart
AgnesCheckBoxGroup(
  groupType: AgnesGroupType.wrap,
  spacing: AGNESSpacing.spacing_16,
  runSpacing: AGNESSpacing.spacing_20,
  labels: _checkBoxLabels,
  betweenSpace: AGNESSpacing.spacing_4,
  onChanged: (value, index, values) {
    debugPrint('예제1 value: $value index: $index values: $values');
  },
);
```

위 코드는 Wrap 형식의 체크박스 그룹을 생성하는 예제입니다. 여러 옵션 중 하나 이상을 선택할 수 있는 형태의 UI를 만듭니다.

### Column

![](/files/XsG3tbeazZL0cfY171xz)

```dart
AgnesCheckBoxGroup(
  groupType: AgnesGroupType.column,
  padding: EdgeInsets.only(bottom: AGNESSpacing.spacing_16),
  labels: _checkBoxLabels,
  betweenSpace: AGNESSpacing.spacing_4,
  onChanged: (value, index, values) {
    debugPrint('예제2 value: $value index: $index values: $values');
  },
);
```

위 코드는 Column 형식의 체크박스 그룹을 생성하는 예제입니다. 여러 옵션 중 하나 이상을 선택할 수 있는 컬럼 형태의 UI를 만듭니다.

### Row&#x20;

![](/files/ZnV1yZwb6ztdcZ5ah9Iz)

```dart
AgnesCheckBoxGroup(
  checkBoxProperty: CheckBoxProperty(shape: CircleBorder()),
  groupType: AgnesGroupType.row,
  padding: EdgeInsets.only(right: AGNESSpacing.spacing_16),
  labels: _checkBoxLabels.sublist(1, 4),
  betweenSpace: AGNESSpacing.spacing_4,
  onChanged: (value, index, values) {
    debugPrint('예제3 value: $value index: $index values: $values');
  },
);
```

위 코드는 Row 형식의 체크박스 그룹을 생성하는 예제입니다. 여러 옵션 중 하나 이상을 선택할 수 있는 로우 형태의 UI를 만듭니다.

## **AgnesCheckBoxTileGroup**&#x20;

### Wrap&#x20;

![](/files/bxKbuzJLh9fuVFAk0il7)

```dart
AgnesCheckBoxTileGroup(
  groupType: AgnesGroupType.wrap,
  spacing: AGNESSpacing.spacing_16,
  runSpacing: AGNESSpacing.spacing_20,
  labels: _checkBoxLabels,
  betweenSpace: AGNESSpacing.spacing_4,
  onChanged: (value, index, values) {
    debugPrint('예제4 value: $value index: $index values: $values');
  },
);
```

위 코드는 Wrap 형식의 타일 체크박스 그룹을 생성하는 예제입니다. 여러 옵션 중 하나 이상을 선택할 수 있으며, 선택한 옵션들을 타일 형태로 표시합니다.

### Column&#x20;

![](/files/AvImKwZ5gyVhoV9I9rXY)

```dart
AgnesCheckBoxTileGroup(
  groupType: AgnesGroupType.column,
  crossGroupAlignment: CrossAxisAlignment.center,
  spacing: AGNESSpacing.spacing_16,
  runSpacing: AGNESSpacing.spacing_20,
  labels: _checkBoxLabels,
  unTouchablePadding: EdgeInsets.only(bottom: AGNESSpacing.spacing_16),
  betweenSpace: AGNESSpacing.spacing_4,
  onChanged: (value, index, values) {
    debugPrint('예제5 value: $value index: $index values: $values');
  },
);
```

위 코드는 Column 형식의 타일 체크박스 그룹을 생성하는 예제입니다. 여러 옵션 중 하나 이상을 선택할 수 있으며, 선택한 옵션들을 컬럼 형태로 표시합니다.

### Row&#x20;

![](/files/Pv0C3ssJLQleI3ZT5x6m)

```dart
AgnesCheckBoxTileGroup(
  groupType: AgnesGroupType.row,
  unTouchablePadding: EdgeInsets.only(right: AGNESSpacing.spacing_16),
  labels: _checkBoxLabels.sublist(1, 4),
  betweenSpace: AGNESSpacing.spacing_4,
  onChanged: (value, index, values) {
    debugPrint('예제6 value: $value index: $index values: $values');
  },
);
```

위 코드는 Row 형식의 타일 체크박스 그룹을 생성하는 예제입니다. 여러 옵션 중 하나 이상을 선택할 수 있으며, 선택한 옵션들을 로우 형태로 표시합니다.

### 위젯 + 타일

![](/files/csdPvBwuYPIgQ61lbNqi)

```dart
AgnesCheckBoxTileGroup(
  groupType: AgnesGroupType.wrap,
  crossGroupAlignment: CrossAxisAlignment.center,
  unTouchablePadding: EdgeInsets.only(right: AGNESSpacing.spacing_16),
  widgets: _widgets,
  betweenSpace: AGNESSpacing.spacing_4,
  onChanged: (value, index, values) {
    debugPrint('예제7 value: $value index: $index values: $values');
  },
);
```

위 코드는 타일 형식의 체크박스 그룹과 위젯을 함께 사용하여 UI를 생성하는 예제입니다. 여러 옵션 중 하나 이상을 선택할 수 있으며, 선택한 옵션과 추가 위젯을 함께 표시합니다.

## **CheckboxListTile**

![](/files/ozR93Cn7wIhN1lQLDE3W)![](/files/nV5OsGjx66njndjGU9xM)

<pre class="language-dart"><code class="lang-dart"><strong>CheckboxListTile(
</strong>  title: const Text('title: CheckBox'),
  subtitle: const Text('subtitle:'),
  value: _ischecked,
  onChanged: (bool? value) {
    setState(() {
      _ischecked = value!;
    });
  },
  secondary: const Icon(Icons.code),
  checkColor: Colors.white,
  isThreeLine: false,
  selected: _ischecked,
);
</code></pre>

위 코드는 단일 체크박스를 포함하는 리스트 타일을 생성하는 예제입니다.

위 예제들를 참고하여 Flutter 앱에서 다양한 형식의 체크박스와 체크박스 그룹을 사용할 수 있습니다. 이러한 체크박스 위젯은 사용자와의 상호작용을 향상시키고 다양한 기능을 구현하는 데 유용합니다.