Flutter의 입력 (feat. stful)

1. 체크박스

Checkbox라는 함수를 통해 구현해 낼 수 있다.

말 그대로 체크를 할 수 있는 네모박스이며 bool 값으로 클릭 시 체크, 체크해제를 할 수 있다.

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Flutter의 입력'),
      ),
      body: Body(),
    ),
  ));
}

class Body extends StatelessWidget {
  const Body({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TestCheckBox(),
      ],
    );
  }
}

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

  @override
  State<TestCheckBox> createState() => _TestCheckBoxState();
}

class _TestCheckBoxState extends State<TestCheckBox> {
  late List<bool> values;

  @override
  void initState() {
    super.initState();
    values = [false, false, false];
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Checkbox(
            value: values[0],
            onChanged: (value) => ChangeValue(0, value ?? false)),
        Checkbox(
            value: values[1],
            onChanged: (value) => ChangeValue(1, value ?? false)),
        Checkbox(
            value: values[2],
            onChanged: (value) => ChangeValue(2, value ?? false)),
      ],
    );
  }

  void ChangeValue(int index, bool value) {
    setState(() {
      values[index] = value;
    });
  }
}

2. RadioButton

여러 항목 중 하나만 선택을 하려할 때 사용하기 좋은 위젯이다.

Radio 함수를 사용하여 활용할 수 있고,

주로 enum과 함께 사용한다.

 

라디오버튼을 사용하기 위해서는

value : 라디오버튼에 나타나는 값

groupValue : 라디오버튼의 그룹 중에서 현재 선택된 값

onChanged : groupValue를 수정해 준다. 수정된 groupValue가 value와 같게 되면 선택

이 세가지 항목을 설정해야 한다.

class Body extends StatelessWidget {
  const Body({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TestCheckBox(),
        TestRadioButton(),
      ],
    );
  }
}

....

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

  @override
  State<TestRadioButton> createState() => _TestRadioButtonState();
}

enum TestRadioValue {
  test1,
  test2,
  test3;
}

class _TestRadioButtonState extends State<TestRadioButton> {
  TestRadioValue? selectValue;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Radio<TestRadioValue>(
            value: TestRadioValue.test1,
            groupValue: selectValue,
            onChanged: (value) => setState(() {
                  selectValue = value!;
                })),
        Radio<TestRadioValue>(
            value: TestRadioValue.test2,
            groupValue: selectValue,
            onChanged: (value) => setState(() => selectValue = value)),
        //이처럼 '{' 뒤에 alt+enter룰 이용하여 화살표로 깔끔하게 정리도 가능하다.
        Radio<TestRadioValue>(
            value: TestRadioValue.test3,
            groupValue: selectValue,
            onChanged: (value) => setState(() => selectValue = value)),
      ],
    );
  }
}

 

라디오버튼은 클릭박스뿐 아니라 텍스트를 함께 넣을 수도 있다.

이는 두가지 방법이 있는데, Row에서 바로 텍스트를 입력하는 방법과

ListTile을 사용하는 방법이 있다.

	Row(
          children: [
            Radio<TestRadioValue>(
                value: TestRadioValue.test1,
                groupValue: selectValue,
                onChanged: (value) => setState(() {
                      selectValue = value!;
                    })),
            Text('test1') //이런식으로 라디오버튼 옆에 텍스트를 달 수 있음
          ],
        ),
        ListTile(
          // 이렇게 다는 방법도 있음
          leading: Radio<TestRadioValue>(
              //child를 leading으로 바꿔줘야함
              value: TestRadioValue.test2,
              groupValue: selectValue,
              onChanged: (value) => setState(() => selectValue = value)),
          title: Text(TestRadioValue.test2.name),
          onTap: () => setState(() {//test2 텍스트를 클릭 시에도 변화를 주고싶음
            if (selectValue != TestRadioValue.test2){
              selectValue = TestRadioValue.test2;
            }
          }),
        ),

다음은 test1과 test2에 선택지 정보를 넣어 수정한 코드이다.

 

 

특히 onTap을 사용하면 버튼뿐 아니라 텍스트를 클릭해도 반응할 수 있도록 할 수 있다.

 

3. Slider

긴 막대를 통해서

특정 범위 내의 값 중 하나를 선택하게 하는 위젯이다.

Slider 함수를 사용하고,

다양한 옵션을 사용할 수 있다.

그 중에서 중요한 것 중 하나는 최대 최소 간격을 설정할 수 있다는 것이다.

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

  @override
  State<TestSlider> createState() => _TestSliderState();
}

class _TestSliderState extends State<TestSlider> {
  double value = 0; //Slider의 value값은 double을 사용한다.

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('${value.round()}'),
        Slider(
            value: value,
            divisions: 100,
            max: 100,
            min: 0,
            label: value.round().toString(), //버튼 위에 숫자 띄움
            activeColor: Colors.green,//바의 색상도 바꿀 수 있음
            onChanged: (newValue) => setState(() => value = newValue)),
      ],
    );
  }
}

다음과 같이 생겼고, 자유롭게 조정이 가능하다.

4. Switch

스위치 버튼이다.

켜고 끄는 것이 스위치기 때문에 bool값을 value로 사용한다.

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

  @override
  State<TestSwitch> createState() => _TestSwitchState();
}

class _TestSwitchState extends State<TestSwitch> {
  bool value = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Switch(
            value: value,
            onChanged: (newValue) => setState(() => value = newValue)),
        CupertinoSwitch(
            value: value,
            onChanged: (newValue) => setState(() => value = newValue))
      ],
    );
  }
}

이처럼 코드를 구성할 수 있다.

한가지 체크할 점은 스위치의 디자인을 변경할 수 있다는 것이다.

여기서는 일반적인 Switch와 CupertinoSwitch를 사용하였다.

꺼진 스위치

켜진 스위치

 

순서대로 위쪽 보라색 스위치가 일반 스위치,

아래쪽 초록색 스위치가 CupertinoSwitch이다.

5. PopupMenu

팝업 메뉴이다.

누르면 팝업창이 생성되어서 다양한 정보들을 보여준다.

PopupMenuButton으로 버튼을 만들고 클릭했을 때 반응으로

PopupMenuItem을 넣어준다.

팝업메뉴도 여러개의 정보를 포함하고 있으므로 라디오버튼과 마찬가지로 enum을 함께 사용해준다.

 

팝업메뉴 버튼과 아이템으로 둘다 구성해야 하기 때문에

앞의 네가지 위젯보다는 조금 복잡한 편이다.

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

  @override
  State<TestPopupMenu> createState() => _TestPopupMenuState();
}

class _TestPopupMenuState extends State<TestPopupMenu> {
  TestValue selectValue = TestValue.test1; //초기값 설정

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(selectValue.name),//선택한 메뉴가 제목처럼 나오게 만든다.
        PopupMenuButton(
          itemBuilder: (context) {
            return TestValue.values
                .map((value) =>
                    PopupMenuItem(value: value, child: Text(value.name))) //메뉴로 value의 이름을 사용
                .toList();
          },
          onSelected: (newValue) => setState(() => selectValue = newValue), //onChanged같은 효과
        ),
      ],
    );
  }
}

 

 

# 전체 테스트 영상