flutter 입력 위젯 모음

Flutter에서는 다양한 입력 위젯을 제공하여 사용자의 입력을 처리할 수 있습니다.

주요 입력 위젯과 그 특징을 정리해보겠습니다.

 

주요 입력 위젯

 

1. TextField

• 설명: 텍스트 입력 필드로, 사용자가 텍스트를 입력할 수 있도록 합니다.

• 특징:

• 기본 텍스트 입력

• 다수의 속성을 통해 입력 형식, 스타일 등을 제어 가능

• controller를 통해 입력된 텍스트를 관리

• 예제:

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Enter your name',
  ),
);

 

2. TextFormField

• 설명: Form과 함께 사용되는 텍스트 입력 필드로, 폼 유효성 검사를 지원합니다.

• 특징:

• TextField와 유사하지만 폼 유효성 검사 기능이 추가됨

• validator를 통해 유효성 검사 로직 구현 가능

• 예제:

TextFormField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Enter your email',
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
);

3. Checkbox

• 설명: 체크박스 위젯으로, 사용자가 옵션을 선택하거나 해제할 수 있습니다.

• 특징:

• value와 onChanged를 통해 상태 관리

• 예제:

Checkbox(
  value: true,
  onChanged: (bool? newValue) {
    // Handle change
  },
);

4. Radio

• 설명: 라디오 버튼 위젯으로, 그룹 내에서 하나의 옵션을 선택할 수 있습니다.

• 특징:

• 여러 라디오 버튼이 같은 그룹에 속할 수 있음

• value와 groupValue, onChanged를 통해 상태 관리

• 예제:

Radio<int>(
  value: 1,
  groupValue: selectedValue,
  onChanged: (int? newValue) {
    // Handle change
  },
);

5. Switch

• 설명: 스위치 위젯으로, 이진 상태를 나타내는 토글 버튼입니다.

• 특징:

• value와 onChanged를 통해 상태 관리

• 예제:

Switch(
  value: true,
  onChanged: (bool newValue) {
    // Handle change
  },
);

6. Slider

• 설명: 슬라이더 위젯으로, 사용자가 값을 선택할 수 있도록 합니다.

• 특징:

• 최소 및 최대 값 설정 가능

• value와 onChanged를 통해 상태 관리

• 예제:

Slider(
  value: 50,
  min: 0,
  max: 100,
  onChanged: (double newValue) {
    // Handle change
  },
);

7. DropdownButton

• 설명: 드롭다운 버튼 위젯으로, 사용자가 목록에서 하나의 옵션을 선택할 수 있습니다.

• 특징:

• items와 onChanged를 통해 상태 관리

• 예제:

DropdownButton<String>(
  value: selectedValue,
  items: <String>['One', 'Two', 'Three'].map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String? newValue) {
    // Handle change
  },
);

참고 자료

 

• Flutter Documentation - TextField

• Flutter Documentation - TextFormField

• Flutter Documentation - Checkbox

• Flutter Documentation - Radio

• Flutter Documentation - Switch

• Flutter Documentation - Slider

• Flutter Documentation - DropdownButton