[flutter] 라디오 버튼 만들기

안녕하세요,

 

오늘은 라디오버튼을 만들고 클릭한 버튼의 텍스트를 출력해보겠습니다. 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RadioButtonExample(),
    );
  }
}

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

class _RadioButtonExampleState extends State<RadioButtonExample> {
  // 선택된 값을 저장할 변수
  int _selectedValue = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('라디오 버튼'),
      ),
      body: Column(
        children: [
          ListTile(
            title: Text('버튼 1'),
            leading: Radio<int>(
              value: 1,
              groupValue: _selectedValue,
              onChanged: (int? value) {
                setState(() {
                  _selectedValue = value!;
                });
              },
            ),
          ),
          ListTile(
            title: Text('버튼 2'),
            leading: Radio<int>(
              value: 2,
              groupValue: _selectedValue,
              onChanged: (int? value) {
                setState(() {
                  _selectedValue = value!;
                });
              },
            ),
          ),
          ListTile(
            title: Text('버튼 3'),
            leading: Radio<int>(
              value: 3,
              groupValue: _selectedValue,
              onChanged: (int? value) {
                setState(() {
                  _selectedValue = value!;
                });
              },
            ),
          ),
          SizedBox(height: 20),
          Text(
            '클릭한 버튼: $_selectedValue',
            style: TextStyle(fontSize: 20),
          ),
        ],
      ),
    );
  }
}

 

 

시연 영상 입니다.