체크박스 (CheckBox)

체크박스 위젯은 사용자에게 선택 옵션을 제공하고 선택 사항을 수집하는 데 사용되는 중요한 위젯입니다. 아래에서 다양한 체크박스 위젯 예제와 설명을 포함한 코드 예시를 확인해보세요.

AgnesCheckBoxGroup

Wrap

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

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

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

Wrap

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

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

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

위젯 + 타일

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

CheckboxListTile(
  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,
);

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

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