Flutter에서 사용자 입력을 받기 위한 다양한 위젯들이 있습니다. 여기서는 `TextField`, `Checkbox`, `Radio`, `Switch`, 그리고 기타 여러 입력 위젯들을 설명하겠습니다.
TextField
`TextField`는 사용자가 텍스트를 입력할 수 있는 기본적인 입력 필드입니다.
– 속성
– `controller`: 텍스트 입력의 값을 제어하기 위한 `TextEditingController`.
– `decoration`: 입력 필드의 장식을 지정하는 `InputDecoration`.
– `keyboardType`: 키보드 타입을 지정하는 `TextInputType`.
– `obscureText`: 비밀번호 입력 등에서 텍스트를 숨기기 위한 Boolean 값.
– 예제
TextField(
controller: TextEditingController(),
decoration: InputDecoration(
labelText: 'Enter your name',
border: OutlineInputBorder(),
),
)
Checkbox
`Checkbox`는 사용자가 선택 또는 선택 해제할 수 있는 체크박스입니다.
– 속성
– `value`: 체크박스의 현재 상태 (true 또는 false).
– `onChanged`: 체크박스의 상태가 변경될 때 호출되는 콜백 함수.
– 예제
Checkbox(
value: true,
onChanged: (bool? value) {
// Do something when the state changes
},
)
Radio
`Radio`는 사용자가 선택할 수 있는 라디오 버튼입니다. 일반적으로 그룹으로 사용됩니다.
– 속성
– `value`: 라디오 버튼의 값.
– `groupValue`: 라디오 그룹의 현재 선택된 값.
– `onChanged`: 라디오 버튼의 선택 상태가 변경될 때 호출되는 콜백 함수.
– 예제
int _radioValue = 0;
Radio(
value: 1,
groupValue: _radioValue,
onChanged: (int? value) {
setState(() {
_radioValue = value!;
});
},
)
Switch
`Switch`는 사용자가 켜거나 끌 수 있는 스위치입니다.
– 속성
– `value`: 스위치의 현재 상태 (true 또는 false).
– `onChanged`: 스위치의 상태가 변경될 때 호출되는 콜백 함수.
– 예제
Switch(
value: true,
onChanged: (bool value) {
// Do something when the state changes
},
)
Slider
`Slider`는 사용자가 드래그하여 값을 선택할 수 있는 슬라이더입니다.
– 속성
– `value`: 슬라이더의 현재 값.
– `min`: 슬라이더의 최소 값.
– `max`: 슬라이더의 최대 값.
– `onChanged`: 슬라이더의 값이 변경될 때 호출되는 콜백 함수.
– 예제
Slider(
value: 10.0,
min: 0.0,
max: 100.0,
onChanged: (double value) {
// Do something when the value changes
},
)
DropdownButton
`DropdownButton`은 사용자가 선택할 수 있는 드롭다운 목록을 제공합니다.
– 속성
– `value`: 드롭다운의 현재 선택된 값.
– `items`: 드롭다운 목록의 항목들.
– `onChanged`: 드롭다운의 선택된 값이 변경될 때 호출되는 콜백 함수.
– 예제
DropdownButton<String>(
value: 'One',
items: <String>['One', 'Two', 'Three'].map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (String? newValue) {
// Do something when the value changes
},
)
DatePicker
`DatePicker`는 날짜를 선택할 수 있는 위젯입니다.
– showDatePicker 함수: 날짜 선택 다이얼로그를 표시합니다.
– 예제
Future<void> _selectDate(BuildContext context) async {
final DateTime? picked = await showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2000),
lastDate: DateTime(2101),
);
if (picked != null) {
// Do something with the picked date
}
}
TimePicker
`TimePicker`는 시간을 선택할 수 있는 위젯입니다.
– showTimePicker 함수: 시간 선택 다이얼로그를 표시합니다.
– 예제
Future<void> _selectTime(BuildContext context) async {
final TimeOfDay? picked = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
if (picked != null) {
// Do something with the picked time
}
}
AlertDialog
`AlertDialog`는 사용자에게 경고 메시지를 표시하는 대화상자입니다.
– 예제
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Alert'),
content: Text('This is an alert dialog.'),
actions: <Widget>[
TextButton(
child: Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
Summary
– TextField: 텍스트 입력 필드.
– Checkbox: 선택 가능한 체크박스.
– Radio: 그룹화된 선택 가능한 라디오 버튼.
– Switch: 켜고 끌 수 있는 스위치.
– Slider: 드래그하여 값을 선택하는 슬라이더.
– DropdownButton: 선택 가능한 드롭다운 목록.
– DatePicker: 날짜 선택기.
– TimePicker: 시간 선택기.
– AlertDialog: 경고 대화상자.
이 위젯들을 사용하면 Flutter 애플리케이션에서 다양한 사용자 입력을 효과적으로 처리할 수 있습니다. 각 위젯의 속성과 예제를 통해 필요에 맞는 입력 방식을 구현할 수 있습니다.