# 체크박스 (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 앱에서 다양한 형식의 체크박스와 체크박스 그룹을 사용할 수 있습니다. 이러한 체크박스 위젯은 사용자와의 상호작용을 향상시키고 다양한 기능을 구현하는 데 유용합니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.aliothx.net/start/uiux/ui-ux/checkbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.