이번에는 위의 사진처럼 특정 조건에 맞지 않으면 메시지를 반환하는 것을 form과 validator 사용하여 구현해보겠다.
나는 참고로 화면 이름으로 InquiryScreen 사용했다.
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
폼 함수를 사용하기 위해 글로벌 키 사용
@override
Widget build(BuildContext context) {
이 코드 body안에
Form(
key: _formKey,
child: Column(
children: [
InputField(
label: '제목 *',
onSaved: (value) {
if (value != null) {
//눌 체크
title = value;
}
},
),
SizedBox(height: 20),
InputField(
label: '내용 *',
isTextArea: true,
hintText: "수정 요청, 유의 사항 등등 문의",
onSaved: (value) {
if (value != null) {
content = value;
}
},
),
],
),
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState != null &&
_formKey.currentState!.validate())
나는 이 코드 사용
위의 사진처럼 제목과 내용부분에 사용자가 입력한 후 버튼을 누르면 입력한 내용을 입력받는 코드이다
class InputField extends StatelessWidget {
final String label;
final bool isTextArea;
final String hintText;
final void Function(String?)? onSaved;
InputField({
required this.label,
this.isTextArea = false,
this.hintText = "",
this.onSaved,
});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: TextStyle(fontWeight: FontWeight.bold),
),
if (isTextArea)
TextFormField(
maxLines: 10,
onSaved: onSaved,
validator: (value) {
if (value == null || value.isEmpty) {
return '필수 입력 항목입니다.';
}
return null;
},
decoration: InputDecoration(
hintText: hintText,
border: OutlineInputBorder(),
),
)
else
TextFormField(
onSaved: onSaved,
validator: (value) {
if (value == null || value.isEmpty) {
return '필수 입력 항목입니다.';
}
return null;
},
decoration: InputDecoration(
border: OutlineInputBorder(),
),
),
],
);
}
}
제목과 내용을 입력하지 않았을 때 "필수 입력 항목입니다" 문구를 내는 부분이다.
onSaved가 사용자가 내용을 입력했을 때 받는 함수
validator이 입력되지 않았을 때 (value == null || value.isEmpty) 메시지를 반환하는 함수이다
둘중에 하나만 비워도 메시지를 잘 반환해주는 모습이다.
https://totally-developer.tistory.com/110" target="_blank" rel="noopener" data-mce-href="https://www.youtube.com/watch?v=qkDnepHYNIc https://totally-developer.tistory.com/110">https://www.youtube.com/watch?v=qkDnepHYNIc https://totally-developer.tistory.com/110
[039] 플러터 (Flutter) 배우기 - Form, validator, TextFormField, Navigator 매개변수 전달하기
안녕하세요~ totally 개발자입니다. Form, validator, TextFormField, Navigator.pushNamed의 매개변수 전달해서 다른 클래스에서 받기 Form, validator, TextFormField를 사용해서 잘 제출되었을 때 다른 페이지로 넘어갈
totally-developer.tistory.com
위는 참고한 코드이다.