깡샘의 플러터&다트 프로그래밍 11-3

---

폼 이용하기

폼(Form)이란?

폼이란 사용자에게 데이터를 입력받는 화면을 만드는 위젯, 사용자가 입력한 데이터의 유효성 검증, 데이터 관리 가능

TextField, TextFormField 차이점

• TextField: 사용자 입력받기 위한 Widget class
• TextFormField: TextField기능 + Form가능(Validation, Form state 관리)

---

Form Validation 사용법

1. Global key로 Form 선언
2. TextFormField에 validator, onSaved 추가
3. Button Submit시 onPress() 함수 추가

Step1. Global key로 Form key 선언

• Form Widget을 선언 후 GlobalKey로 form key로 생성하고 Form key 값으로 설정한다.

final _formKey = GlobalKey<FormState>();

Step2. TextFormField에 validator, onSaved 추가

• onSaved(): onSaved(value)로 전달하는 value 값이 사용자 입력 값이고, setState() 함수에서 value 값을 state에 저장하고 setState() 호출
• validator(): validator(value)로 전달하는 value값의 조건을 확인한다. Validation 조건이 맞지 않는 경우는 에러 메시지 return, 아니라면 null return

Step3. Button submit 시 onPress() 함수 추가

onPressed: () {
    if (_formKey.currentState?.validate() ?? false) {
        _formKey.currentState?.save();
        print('firstName: $firstName, lastName : $lastName');
    }
    }

• 만약 _formKey.currentState?.validate()이 true라면 값을 저장하고 이름과 성을 출력한다.