다음 화면처럼 Form 위젯을 이용하여 여러 TextField를 한 번에 검사(validate)하고 처리할 수 있다.

Form과 TextField 생성

Form을 관리하고자 _formKey를 생성하고 Form의 key로 설정한다.

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

			Form(
              key: _formKey,
              child: Column(
                children: [
                  TextFormField(
                    // ...
                  ),
                  Gaps.v12,
                  TextFormField(
                  	// ...
                  ),
                ],
              ),
            ),

validator 설정

Form 안의 TextField의 property인 validator를 설정하여 에러메시지를 반환할 수 있다. 만약 TextField의 value가 비워져 있다면 Email is not valid 라는 에러메시지를 반환하고, 아니라면 null을 반한화는 방법은 아래와 같다. 구체적인 에러메시지는 사진처럼 TextField의 아래에 나타난다.

                  // ...
                  TextFormField(
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Email is not valid';
                      }
                      return null;
                    },
                    // ...

그리고 Log in 버튼이 눌러지면 아래 함수가 실행되도록 한다.

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

https://github.com/soaringwave/tiktokclone/commit/ab1f81fb6e72749c94fa2b59ddbc9b2b20a6e83c
https://github.com/soaringwave/tiktokclone/commit/9043ad8f42919469228adc9ad3acbc1f174d1027

onSaved 설정

validate 과정을 통해 성공적으로 submit된다면, onSaved를 통해 유저의 정보를 저장할 수 있다. 임시로 사용자의 email과 password를 저장하는 _formData를 만들고, TextField의 값을 이에 저장하도록 설정할 수 있다.

  final Map<String, String> _formData = {};
  
   void _onLoginSubmitted() {
    if (_formKey.currentState != null) {
      if (_formKey.currentState!.validate()) {
        _formKey.currentState!.save();
      }
    }
  }
  
  // ...
                  TextFormField(
                    onSaved: (newValue) {
                      if (newValue != null) {
                        _formData['password'] = newValue;
                      }
                    },
                    // ...

https://github.com/soaringwave/tiktokclone/commit/c382328cb65fa061c0641d2bc20680c6bcd223ee

Form class
https://api.flutter.dev/flutter/widgets/Form-class.html

---

📎 강의
https://nomadcoders.co/tiktok-clone/lectures/4192