# 라디오버튼 (RadioButton)

## **AgnesRadioButtonGroup**

<figure><img src="https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FrFBg1kmitG8TRFNclOUx%2F%E1%84%85%E1%85%A1%E1%84%83%E1%85%B5%E1%84%8B%E1%85%A9%E1%84%87%E1%85%A5%E1%84%90%E1%85%B3%E1%86%AB.gif?alt=media&#x26;token=c40abbf8-6b96-4d6a-8759-921173abbdb6" alt=""><figcaption></figcaption></figure>

### Wrap&#x20;

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FUVosiGWiD7T2IIy3a2Zt%2Fimage.png?alt=media\&token=6d175215-3326-48a1-9985-e20383663e62)

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

위 코드는 Wrap 형식의 라디오버튼 그룹을 생성하는 예제입니다. 여러 옵션 중 하나를 선택할 수 있으며, Wrap 형식으로 표시됩니다.

### Column&#x20;

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2Fswa8HUcPqpUp3yaKOZXY%2Fimage.png?alt=media\&token=900ea8dd-ceb4-49e3-8c6f-f76bb318eab9)

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

위 코드는 Column 형식의 라디오버튼 그룹을 생성하는 예제입니다. 여러 옵션 중 하나를 선택할 수 있으며, Column 형식으로 표시됩니다.

### Row&#x20;

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2Fajb4JzpTWfQBSfgIB3gy%2Fimage.png?alt=media\&token=8313ee50-5e95-4ac0-9c8f-cbb01d7d569d)

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

위 코드는 Row 형식의 라디오버튼 그룹을 생성하는 예제입니다. 여러 옵션 중 하나를 선택할 수 있으며, Row 형식으로 표시됩니다.

## **AgnesRadioButtonTileGroup**&#x20;

### Wrap&#x20;

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FWC6B0cJSGFLVtHRXbZQ0%2Fimage.png?alt=media\&token=404deb2c-a040-499f-bffc-158cf8bf7e55)

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

위 코드는 Wrap 형식의 타일 라디오버튼 그룹을 생성하는 예제입니다. 여러 옵션 중 하나를 선택할 수 있으며, Wrap 형식으로 타일로 표시됩니다.

### Column

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FzgOIVqS5vflFHfBUhAOb%2Fimage.png?alt=media\&token=4de442b1-af28-4627-88fb-1a2814c4a59d)

```dart
AgnesRadioButtonTileGroup(
  groupType: AgnesGroupType.column,
  spacing: AGNESSpacing.spacing_16,
  runSpacing: AGNESSpacing.spacing_20,
  values: _radioButtonLabels,
  labels: _radioButtonLabels,
  unTouchablePadding: EdgeInsets.only(bottom: AGNESSpacing.spacing_16),
  padding: EdgeInsets.all(AGNESSpacing.spacing_4),
  betweenSpace: AGNESSpacing.spacing_4,
  onChanged: (value, index) {
    debugPrint('예제5 value: $value index: $index');
  },
);
```

위 코드는 Column 형식의 타일 라디오버튼 그룹을 생성하는 예제입니다. 여러 옵션 중 하나를 선택할 수 있으며, Column 형식으로 타일로 표시됩니다.

### Row&#x20;

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FSdEUxDb9y1WccWNiLqqL%2Fimage.png?alt=media\&token=b8fb6dae-27b0-4f51-9502-bceb8177d3f7)

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

위 코드는 Row 형식의 타일 라디오버튼 그룹을 생성하는 예제입니다. 여러 옵션 중 하나를 선택할 수 있으며, Row 형식으로 타일로 표시됩니다.

### 위젯 + 타일&#x20;

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2Fy8GL4bV0JHEnYnFNrkwV%2Fimage.png?alt=media\&token=18609baf-e649-4cab-8792-05b7f9a2a837)

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

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

## **RadioListTile**&#x20;

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FFhsX1tLo51LeGeFMSec7%2Fimage.png?alt=media\&token=e85ec9bc-86fc-4321-ae49-48e698cb53e1)![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FnnfPR3Gpl8XKN1AYzFi2%2Fimage.png?alt=media\&token=a9cebd19-0aa9-4472-ac05-4499715a3e46)

```dart
RadioListTile(
  secondary: const Icon(Icons.code),
  controlAffinity: ListTileControlAffinity.trailing,
  title: Text('title: RadioButton'),
  subtitle: Text('subtitle:'),
  value: value,
  groupValue: val,
  onChanged: (value) {
    setState(() {
      val = 1;
      _value = true;
    });
  },
  selected: _value,
);
```

위 코드는 단일 라디오버튼을 포함하는 리스트 타일을 생성하는 예제입니다.

위 예제들을 참고하여 Flutter 앱에서 라디오버튼과 라디오버튼 그룹을 다양하게 활용할 수 있습니다. 이러한 라디오버튼 위젯과 그룹은 사용자가 선택지를 간편하게 관리하고 목록에서 옵션을 선택하는 데 도움이 됩니다.