Flutter : Form

flutter

flutter 의 여러 입력값들을 묶어 처리하는 Form 을 살펴보자.

Form class

Form({Key key, @required Widget child, bool autovalidate: false, WillPopCallback onWillPop, VoidCallback onChanged })

An optional container for grouping together multiple form field widgets

 

TextField 같은 사용자의 입력을 받을 수 있는 다양한 위젯들을 통해 여러 정보들을 하나의 그룹으로 묶어 처리하고자 할때 쓴다.

회원가입 페이지를 예로 생각해보면 용도를 이해하기 쉽다.

가입 페이지에 있는 여러개 입력란을 통해 값을 입력하고 저장하는 과정과 관련된 위젯들을 담는 위젯이라고 생각할 수 있다.

FormField class

FormField({Key key, @required FormFieldBuilder builder, FormFieldSetter onSaved, FormFieldValidator validator, T initialValue, bool autovalidate: false, bool enabled: true })

A single form field.

This widget maintains the current state of the form field, so that updates and validation errors are visually reflected in the UI.

Form 을 구성하는 각 입력 form field 들은 FormField widget 이 된다.

여기서 form field 는 텍스트 입력, 문항중 선택 등 다양한 방식을 구현한 위젯들로 구성된다.

모든 form field 는 상태값(state)을 가지고 있고, 이를 통해 해당 field의 입력값이 잘못된 값인지, 저장할 값인지를 판단하여 처리할 수 있다.

FormState class

FormState()

State associated with a Form widget.

A FormState object can be used to save, reset, and validate every FormField that is a descendant of the associated Form.

Typically obtained via Form.of.

Form 과 연관된 상태값을 관리하는 클래스 이다.

FormField 가 FormState 의 method 인 save, reset, validate 를 호출하여 Form 입력값들을 저장, 초기화, 검사 할 수 있게 된다.

FormState 는 Form 을 통해 얻을 수 있는데 GlobalKey 나 Form.of() 를 이용하는 방법이 있다.

TextFormField class

TextFormField({Key key, TextEditingController controller, String initialValue, FocusNode focusNode, InputDecoration decoration: const InputDecoration(), TextInputType keyboardType, ... })

A FormField that contains a TextField.

This is a convenience widget that wraps a TextField widget in a FormField.

TextField 를 FormField 기반으로 만든 widget 이다.

Form 안에서 TextField 처럼 사용하면 된다.

Example

 

 

GlobalKey 를 통해 submit button 에서 FormState 의 method 를 호출하여 Form 의 값들을 처리한다.

 

Name field 의 코드

아무것도 입력하지 않을 시 validator 에서 에러 문자열을 반환함으로써 Form 데이터의 재 입력을 요청한다.

 

TextField 와 마찬가지로 InputDecoration 을 사용할 수 있다.

DropdownButtonFormField

A convenience widget that wraps a DropdownButton in a FormField.

여러개의 항목중 하나를 선택하는 DropdownButton 이다.

Reference

Flutter Documentation