[flutter] Row 위젯에서의 라디오 버튼 사용하기

07 Dec 2023

flutter

Flutter에서는 Row 위젯을 사용하여 가로로 여러 위젯을 배열할 수 있습니다. 이때, 라디오 버튼을 사용하여 여러 개의 옵션 중 하나를 선택할 수 있는 기능을 구현하고 싶다면 어떻게 해야 할까요? 이번 블로그 포스트에서는 Row 위젯에서의 라디오 버튼을 사용하는 방법을 알아보겠습니다.

1. RadioButton 위젯 가져오기

Flutter에서는 기본적으로 RadioButton 위젯을 제공하지 않습니다. 따라서, 라디오 버튼을 사용하기 위해서는 먼저 RadioButton 위젯을 가져와야 합니다. 이를 위해 다음의 패키지를 pubspec.yaml 파일에 추가해주세요:

dependencies:
  flutter_radio_button: ^0.1.1

그리고 다음 명령어를 실행하여 패키지를 설치해주세요:

flutter packages get

2. RadioButton 위젯 사용하기

import 'package:flutter/material.dart';
import 'package:flutter_radio_button/flutter_radio_button.dart';

class RadioButtonExample extends StatefulWidget {
  @override
  _RadioButtonExampleState createState() => _RadioButtonExampleState();
}

class _RadioButtonExampleState extends State<RadioButtonExample> {
  int _selectedOption = 0;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        RadioButton(
          value: 0,
          groupValue: _selectedOption,
          onChanged: (value) {
            setState(() {
              _selectedOption = value;
            });
          },
        ),
        Text("Option 1"),
        RadioButton(
          value: 1,
          groupValue: _selectedOption,
          onChanged: (value) {
            setState(() {
              _selectedOption = value;
            });
          },
        ),
        Text("Option 2"),
        RadioButton(
          value: 2,
          groupValue: _selectedOption,
          onChanged: (value) {
            setState(() {
              _selectedOption = value;
            });
          },
        ),
        Text("Option 3"),
      ],
    );
  }
}

위의 코드에서는 RadioButton 위젯을 사용하여 세 개의 옵션을 가진 라디오 버튼을 생성합니다. 각 RadioButton 위젯은 value와 groupValue 속성을 가지고 있습니다. value는 옵션의 고유값을 나타내고, groupValue는 현재 선택된 옵션의 고유값을 나타냅니다. 또한, onChanged 콜백을 통해 선택된 옵션이 변경될 때마다 _selectedOption 값을 업데이트하여 UI를 업데이트합니다.

3. Row 위젯에 적용하기

이제 위의 RadioButtonExample 위젯을 Row 위젯 내에 적용하여 사용할 수 있습니다.

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text("Select an option:"),
        RadioButtonExample(),
      ],
    );
  }
}

위의 코드에서는 Row 위젯 내에 “Select an option:” 텍스트와 RadioButtonExample 위젯을 함께 사용하여 가로로 배열합니다.

마무리

이제 Flutter의 Row 위젯에서 라디오 버튼을 사용하는 방법을 알아보았습니다. RadioButton 위젯을 가져와 사용하고, Row 위젯 내에 적용하여 여러 개의 옵션 중 하나를 선택할 수 있는 UI를 생성할 수 있습니다.