라디오버튼 (RadioButton)

라디오버튼(RadioButton) 위젯은 사용자가 여러 옵션 중 하나를 선택하는 데 사용됩니다. 아래에서 다양한 형식의 라디오버튼과 라디오버튼 그룹을 설명하는 코드 예제를 확인해보세요.

AgnesRadioButtonGroup

Wrap

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

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

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

Wrap

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

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

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 형식으로 타일로 표시됩니다.

위젯 + 타일

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

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