# 체크박스 (CheckBox)

## **AgnesCheckBoxGroup**

<figure><img src="https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FvT3vXKyyGfVE8Eg4bKn9%2F%E1%84%8E%E1%85%A6%E1%84%8F%E1%85%B3%E1%84%87%E1%85%A1%E1%86%A8%E1%84%89%E1%85%B3.gif?alt=media&#x26;token=e24faffc-5eb0-4e92-ad3c-a76d049b90bb" alt=""><figcaption></figcaption></figure>

### Wrap

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FJEpY3t58nVI90HpmddoW%2Fimage.png?alt=media\&token=47791626-0823-4093-a2e8-ebf9f96e4dc9)

```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

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2Fwg0WsW1xgIUJEP1ZfLn5%2Fimage.png?alt=media\&token=debd061e-5fc1-437c-8eda-3f3a24e9285d)

```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;

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FGIobODQryCPJNsKuyIVb%2Fimage.png?alt=media\&token=76bbca19-da23-4646-a5bc-e79147c50391)

```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;

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2F6JtQvEpslU9wCZu4250V%2Fimage.png?alt=media\&token=39b3bc50-55e6-4f95-a9eb-88eaeb40b795)

```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;

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FwaSpVeexEiJbEJcX0kJN%2Fimage.png?alt=media\&token=99abf277-c4f2-4aa1-a6ed-ea2225fcdffa)

```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;

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2F6O9hhjIvhxFaADiLTHkc%2Fimage.png?alt=media\&token=62802ca7-22c1-4c0f-a835-cd69a406c78a)

```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 형식의 타일 체크박스 그룹을 생성하는 예제입니다. 여러 옵션 중 하나 이상을 선택할 수 있으며, 선택한 옵션들을 로우 형태로 표시합니다.

### 위젯 + 타일

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FX65HLcK4G900TSnN1E2M%2Fimage.png?alt=media\&token=bc0326fa-31b2-496a-8844-bb14e2403978)

```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**

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2Fv1IlHOG31jjB9Ai6QDdM%2Fimage.png?alt=media\&token=b282d117-adfa-4e5a-b562-7eabe4c0b411)![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FoogB55K4Z3VWPGPz9MnI%2Fimage.png?alt=media\&token=3cb93c0d-f7b4-47be-af48-6515d67e0f7d)

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