[flutter] RaisedButton을 사용해 라디오 버튼 동작

07 Dec 2023

flutter

Flutter에서 RaisedButton을 사용하여 라디오 버튼을 동작시키는 방법을 알아보겠습니다. 라디오 버튼은 여러 개의 상호 배타적인 옵션 중 하나를 선택할 수 있는 버튼입니다.

단계 1: 프로젝트 설정

먼저, Flutter 프로젝트를 생성하고 RaisedButton을 사용할 수 있도록 필요한 패키지를 추가해야 합니다. pubspec.yaml 파일을 열고 다음과 같이 flutter/material.dart 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter

  # Add the material package
  material: ^1.0.0

단계 2: 라디오 버튼 생성

이제 라디오 버튼을 생성하고 동작시켜보겠습니다. 다음과 같이 StatefulWidget을 사용하여 라디오 버튼을 구현하도록 하겠습니다.

import 'package:flutter/material.dart';

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

class _RadioButtonExampleState extends State<RadioButtonExample> {
  int selectedRadioTile;

  @override
  void initState() {
    super.initState();
    selectedRadioTile = 0;
  }

  setSelectedRadioTile(int val) {
    setState(() {
      selectedRadioTile = val;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Radio Button Example"),
      ),
      body: Column(
        children: <Widget>[
          RadioListTile(
            value: 1,
            groupValue: selectedRadioTile,
            title: Text("Option 1"),
            onChanged: (val) {
              setSelectedRadioTile(val);
            },
          ),
          RadioListTile(
            value: 2,
            groupValue: selectedRadioTile,
            title: Text("Option 2"),
            onChanged: (val) {
              setSelectedRadioTile(val);
            },
          ),
          RadioListTile(
            value: 3,
            groupValue: selectedRadioTile,
            title: Text("Option 3"),
            onChanged: (val) {
              setSelectedRadioTile(val);
            },
          ),
        ],
      ),
    );
  }
}

단계 3: 앱 실행

마지막으로, 생성한 라디오 버튼을 앱의 메인 화면에 표시하고 실행해보겠습니다. 다음과 같이 main.dart 파일을 열고 RadioButtonExample 위젯을 호출해주세요.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: RadioButtonExample(),
  ));
}

이제 Flutter 앱을 빌드하고 실행하면 위젯에 세 개의 라디오 버튼이 표시됩니다. 사용자가 버튼을 선택하면 선택된 버튼이 하이라이트되어 나타납니다.

이것으로 라디오 버튼을 RaisedButton을 사용하여 동작시키는 방법을 알아보았습니다. Flutter에서 다양한 UI 요소를 사용하는 방법에 대해 더 알아보려면 Flutter 공식 문서를 참조해주세요.