TextFormField

TextFormField

• 기본 설명: TextFormField는 TextField를 기반으로 하지만, Form 위젯과 함께 사용되도록 설계된 특별한 TextField입니다.
• 특징:
  • Form 위젯과 함께 사용될 때 유용합니다. 폼 검증(validation), 폼 저장(save) 등의 기능을 쉽게 통합할 수 있습니다.
  • validator 함수를 통해 입력값 검증이 가능하며, onSaved 콜백을 통해 폼이 저장될 때 입력값을 저장할 수 있습니다.
  • TextField의 모든 기능을 포함하며, 추가적으로 폼 관련 기능을 제공합니다.

사용 시나리오

• TextField 사용: 단순한 텍스트 입력이 필요할 때, 예를 들어 검색 필드, 메시지 입력 필드 등에서 사용합니다.
• TextFormField 사용: 사용자 입력을 검증하고 저장해야 하는 복잡한 양식에서 사용합니다. 예를 들어, 로그인 화면, 회원가입 양식, 설정 화면 등에서 유용합니다.

final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  void _onSubmitTap() {
    _formKey.currentState?.validate();
  }

child: Form(
      key: _formKey,
      child: Column(
        children: [
          Gaps.v28,
          TextFormField(
            validator: (value) {
              return 'i dont like your email';
            },
            decoration: const InputDecoration(
              hintText: 'Email',
            ),
          ),
          Gaps.v16,
          TextFormField(
            validator: (value) {
              return 'wrong password';
            },
            decoration: const InputDecoration(
              hintText: 'Password',
            ),
          ),
          Gaps.v28,
          FormButton(
            disabled: false,
            onPressed: _onSubmitTap,
            text: 'Log In',
          )
        ],
      ),
    ),

다음과 같이 Form 안에 TextFormField을 넣는 식으로 구현해야한다.

TextFormField를 사용하면 더이상 state를 추적하지 않아도 된다.

GlobalKey<FormState>를 선언해야 한다.

final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
_formKey.currentState!.validate();
_formKey.currentState!.save();

validate()는 TextFormField안에 validator가 하나라도 false 면 false를 리턴한다.
false가 없으면 true

save() 는 onSaved 에 설정된 대로 수행한다.