Flutter의 라디오 버튼(Radio Button) 사용법

Flutter에서 Radio 위젯은 사용자가 하나의 옵션을 선택할 수 있도록 하는 데 사용됩니다. 라디오 버튼은 여러 옵션 중 하나만 선택할 수 있는 경우에 유용합니다. 이번 글에서는 Flutter의 Radio 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 Radio 사용법

Radio 위젯은 value, groupValue, onChanged 속성을 사용하여 상태를 관리합니다. value는 각 라디오 버튼의 고유 값이고, groupValue는 선택된 라디오 버튼의 값을 나타냅니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedValue = 1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Radio Button Demo')),
        body: Column(
          children: <Widget>[
            Radio(
              value: 1,
              groupValue: _selectedValue,
              onChanged: (int? value) {
                setState(() {
                  _selectedValue = value!;
                });
              },
            ),
            Radio(
              value: 2,
              groupValue: _selectedValue,
              onChanged: (int? value) {
                setState(() {
                  _selectedValue = value!;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 두 개의 라디오 버튼을 생성하고, 사용자가 라디오 버튼을 선택할 때 _selectedValue 상태가 변경되도록 합니다.

2. RadioListTile 사용

RadioListTile 위젯은 Radio와 ListTile을 결합한 형태로, 텍스트와 라디오 버튼을 함께 배치할 때 유용합니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedValue = 1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('RadioListTile Demo')),
        body: Column(
          children: <Widget>[
            RadioListTile<int>(
              title: Text('Option 1'),
              value: 1,
              groupValue: _selectedValue,
              onChanged: (int? value) {
                setState(() {
                  _selectedValue = value!;
                });
              },
            ),
            RadioListTile<int>(
              title: Text('Option 2'),
              value: 2,
              groupValue: _selectedValue,
              onChanged: (int? value) {
                setState(() {
                  _selectedValue = value!;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 RadioListTile을 사용하여 라디오 버튼과 텍스트를 함께 배치합니다. RadioListTile은 사용하기 편리하며, 텍스트와 라디오 버튼을 쉽게 정렬할 수 있습니다.

3. 라디오 버튼 색상 변경

Radio 위젯의 색상을 변경하려면 activeColor 속성을 사용합니다.

 

Radio(
  value: 1,
  groupValue: _selectedValue,
  onChanged: (int? value) {
    setState(() {
      _selectedValue = value!;
    });
  },
  activeColor: Colors.red,
)

 

위 코드는 라디오 버튼이 선택되었을 때의 색상을 빨간색으로 설정합니다.

 

 

반응형

 

 

4. 비활성화된 라디오 버튼

라디오 버튼을 비활성화하려면 onChanged 속성에 null을 할당합니다.

 

Radio(
  value: 1,
  groupValue: _selectedValue,
  onChanged: null, // 라디오 버튼 비활성화
)

 

위 코드는 라디오 버튼을 비활성화하여 사용자가 선택할 수 없도록 합니다.

5. 여러 개의 라디오 버튼 그룹 처리

여러 개의 라디오 버튼 그룹을 처리하려면 각 그룹의 상태를 별도로 관리하고, 각 그룹의 상태 변경을 처리하는 방법을 구현해야 합니다.

 

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _groupValue1 = 1;
  int _groupValue2 = 1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Multiple Radio Groups')),
        body: Column(
          children: <Widget>[
            Text('Group 1'),
            RadioListTile<int>(
              title: Text('Option 1'),
              value: 1,
              groupValue: _groupValue1,
              onChanged: (int? value) {
                setState(() {
                  _groupValue1 = value!;
                });
              },
            ),
            RadioListTile<int>(
              title: Text('Option 2'),
              value: 2,
              groupValue: _groupValue1,
              onChanged: (int? value) {
                setState(() {
                  _groupValue1 = value!;
                });
              },
            ),
            Text('Group 2'),
            RadioListTile<int>(
              title: Text('Option A'),
              value: 1,
              groupValue: _groupValue2,
              onChanged: (int? value) {
                setState(() {
                  _groupValue2 = value!;
                });
              },
            ),
            RadioListTile<int>(
              title: Text('Option B'),
              value: 2,
              groupValue: _groupValue2,
              onChanged: (int? value) {
                setState(() {
                  _groupValue2 = value!;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 두 개의 라디오 버튼 그룹을 생성하고, 각 그룹의 상태를 별도로 관리합니다.

결론

Radio 위젯은 Flutter 애플리케이션에서 사용자로부터 하나의 선택 항목을 받는 데 매우 유용한 도구입니다. 기본 사용법부터 RadioListTile, 색상 변경, 비활성화, 여러 라디오 버튼 그룹 처리 등 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있습니다. Radio 위젯을 적절히 활용하여 직관적이고 효율적인 사용자 인터페이스를 제공하는 애플리케이션을 만들어보세요.