[Flutter] Radio 클래스 사용하기

이 예제에서는 3개의 라디오 버튼 위젯이 있는 Flutter 애플리케이션을 생성합니다. 라디오 위젯은 라디오 버튼만 표시하고 레이블은 표시하지 않습니다. 레이블도 표시하기 위해 레이블 텍스트가 제목 속성에 할당되고 라디오 버튼이 선행 속성에 할당된 ListTile 위젯을 사용합니다.

main.dart

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  static const String _title = 'Flutter Tutorial';
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}
 
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);
 
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
 
enum OS { mac, windows, linux }
 
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  OS? _os = OS.mac;
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          const SizedBox(height: 30,),
          const Text('Which Operating System are your currently using?'),
          const SizedBox(height: 10,),
          ListTile(
            title: const Text('Mac'),
            leading: Radio<OS>(
              value: OS.mac,
              groupValue: _os,
              onChanged: (OS? value) {
                setState(() {
                  _os = value;
                });
              },
            )
          ),
          ListTile(
            title: const Text('Windows'),
            leading: Radio<OS>(
              value: OS.windows,
              groupValue: _os,
              onChanged: (OS? value) {
                setState(() {
                  _os = value;
                });
              },
            )
          ),
          ListTile(
              title: const Text('Linux'),
              leading: Radio<OS>(
                value: OS.linux,
                groupValue: _os,
                onChanged: (OS? value) {
                  setState(() {
                    _os = value;
                  });
                },
              )
          ),
        ],
      ),
    );
  }
}

스크린샷 [안드로이드 에뮬레이터]

[Flutter] Radio 클래스 사용하기


댓글

이 블로그의 인기 게시물

[Flutter] FlatButton 클래스 사용하기

[Flutter] Image 위젯