[야나두] Dart 입력위젯

박경수·2024년 2월 28일
0

Checkbox

StatefulWidget 위젯을 이용해 생성.


/// 전체 코드
class TestCheckBox extends StatefulWidget {
	...
}

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

  
  void initState() {
    super.initState();

    values = [false, false];
  }

  
  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)),
      ],
    );
  }

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

체크 박스 생성시 bool타입인 valuechanged가 있다.
changeValue()함수를 통해 valuesindex를 통해 특정된 값을 onChanged에서 받은 값으로 변경한다.

CheckboxListTitle

아래와 같이 이쁜 체크박스도 있다.
이런 형태는 토이 프로젝트에도 많이 사용할 수 있겠다.


CheckboxListTile(
    title: Text("title"),
    subtitle: Text("subTitle"),
    controlAffinity: ListTileControlAffinity.leading,
    value: list[0],
    onChanged: (newValue) {
      setState(() {
        list[0] = newValue ?? false;
      });
    }
);

Radio

라디오는 선택이 중복 될 수 없다.
따라서, 라디오는 enum을 사용했다.

enum

그룹화해 사용할 수 있는 상수를 한군대 모아 사용할 수 있다.
enum은 API를 사용해 개발시 다뤄질 것으로 보인다. 그때 집중적으로 공부하겠다.


// HTML에서 ID를 모아둔 느낌
enum TestRadioValue {
  test1,
  test2,
}

class _TestRadioState extends State<TestRadio> {
  TestRadioValue? selectValue; // Radio에 groupValue를 할당하기 위해 선언

  
  Widget build(BuildContext context) {
    return Column(
      children: [
      	// 라디오를 생성하고 generic type이 필요한데, 이것은 enum으로 잡는다.
        Radio<TestRadioValue>(
            value: TestRadioValue.test1, //해당 라디오의 ID
            groupValue: selectValue,
            onChanged: (value) => changeRadio(selectValue, value)
        ),
        Radio<TestRadioValue>(
            value: TestRadioValue.test2,
            groupValue: selectValue,
            onChanged: (value) => changeRadio(selectValue, value)
        )
      ],
    );
  }

  void changeRadio(stateValue, value) {
    setState(
      () => selectValue = value,
    );
  }
}

TestRadioValue? selectValue;groupValue에 selecValue가 잘 이해되지 않는다.

이해

TestRadioValue 타입을 갖는 selecValue를 선언했다. (null 일 수 있는)
실제로, print결과는 초기값이 null이었다.


class _TestRadioState extends State<TestRadio> {
  TestRadioValue? selectValue; // Radio에 groupValue를 할당하기 위해 선언

  
  Widget build(BuildContext context) {
  	print('-->$selectValue1');
    // '--> null'
    return Column(
      children: [
      	// 라디오를 생성하고 generic type이 필요한데, 이것은 enum으로 잡는다.
        Radio<TestRadioValue>(),
        Radio<TestRadioValue>()
      ],
    );
  }
 void changeRadio(stateValue, value) {
    setState(
      () => selectValue1 = value,
    );
  }
}

그리고, 라디오를 변경했을때, -->TestRadioValue.test1로 나왔다.
changeRadio를 통해 selectValue1(null)이 setState를 통해 value를 받고 groupValue가 변경되며 라디오의 상태가 변경된다.

실제로, TestRadioValue? selectValue1 = TestRadioValue.test2;로 설정하면 두번째 라디오 가 체크 되었다.

고 이해했다. (앞으로 프로젝트를 진행하며 테스트해 볼 계획이다)

기타

그외 슬라이더와 팝업 메뉴 등
많은 위젯이있는데, 필요한 위젯이 있을경우 아래 주소에서 찾아볼 수 있다.

https://api.flutter.dev/flutter/material/material-library.html#classes

profile
<>{...}</>

0개의 댓글

관련 채용 정보