플러터 기본기 다지기 - Checkbox, Radio, Slider, Switch

Checkbox, Radio, Slider, Switch

• 체크박스: 사용자에게 true 또는 false를 입력받는 기본 위젯

Checkbox(
  value: _checkBoxValue,
  onChanged: (value) {
    setState(() {
      _checkBoxValue = value!;
    });
  },
);

• 라디오: 라디오 버튼 인터페이스로 사용자에게 여러 항목 중 하나만 선택할 수 있도록 하는 위젯

Radio(
  value: 'Option 1',
  groupValue: _radioValue,
  onChanged: (value) {
    setState(() {
      _radioValue = value.toString();
    });
  },
);

• Slider: 음량 조정 등에서 사용하는 막대를 밀어서 숫자값을 입력받는 위젯

Slider(
  value: _sliderValue,
  min: 0,
  max: 100,
  onChanged: (value) {
    setState(() {
      _sliderValue = value;
    });
  },
);

 

• Switch: 사용자에게 true 또는 false를 입력받을 수 있는 스위치 위젯

Switch(
  value: _switchValue,
  onChanged: (value) {
    setState(() {
      _switchValue = value;
    });
  },
);

 

 

체크박스 위젯, 라디오 위젯 사용

import 'package:flutter/material.dart';

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

class MyApp7 extends StatefulWidget {
  const MyApp7({super.key});

  @override
  State<MyApp7> createState() => _MyApp7State();
}

class _MyApp7State extends State<MyApp7> {
  // bool 데이터 타입과 bool? 타입은 다른 것이다.
  bool? _checkBoxValue = true;
  String _radioValue = 'Option 1';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MyApp7'),
        ),
        body: Container(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              Center(
                child: Text('$_checkBoxValue'),
              ),
              const SizedBox(height: 16.0),
              Checkbox(
                value: _checkBoxValue,
                onChanged: (value) {
                  print('value : $value');
                  setState(() {
                    _checkBoxValue = value;
                  });
                },
              ),
              const SizedBox(height: 16.0),
              Text('Radio Button'),
              Row(
                children: [
                  Radio(
                    value: '축구',
                    groupValue: _radioValue,
                    onChanged: (value) {
                      setState(() {
                        print("value : $value");

                        _radioValue = value.toString();
                      });
                    },
                  ),
                  Text('축구'),
                  Radio(
                    value: '농구',
                    groupValue: _radioValue,
                    onChanged: (value) {
                      setState(() {
                        print("value : $value");
                        _radioValue = value.toString();
                      });
                    },
                  ),
                  Text('농구'),

                  // Slider 위젯을 사용 1
                  // Switch 위젯을 사용 2 

                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}