> 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/radiobutton.md).

# 라디오버튼 (RadioButton)

## **AgnesRadioButtonGroup**

<figure><img src="/files/0kyDMWg1Gz4g2vkdH6dx" alt=""><figcaption></figcaption></figure>

### Wrap&#x20;

![](/files/ArZocWNfCNdkWuVTvxyH)

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

![](/files/92GFfnlbStWn5k4ghx10)

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

![](/files/TXguEPxwrqoL4JA8DEM7)

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

![](/files/wmhPaKrUi0TePtsjSkrb)

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

![](/files/DQMhHdjHndAIqFVpv85d)

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

![](/files/pcqNJ8rGTsb2z1OLoWYn)

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

![](/files/uksDn1qw4Dev2Deywp4c)

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

![](/files/Zu8Cw1mabOOhYULtJ4K2)![](/files/mxo8G4NDgraBSaBsysJV)

```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 앱에서 라디오버튼과 라디오버튼 그룹을 다양하게 활용할 수 있습니다. 이러한 라디오버튼 위젯과 그룹은 사용자가 선택지를 간편하게 관리하고 목록에서 옵션을 선택하는 데 도움이 됩니다.