[Flutter] 회원가입 폼 만들기(1)TextFormField validator 사용하기

Form(

    child:Column(

        children: [

            TextFormField 있는 거임 

여러개의 TextFormField를 한 번에 관리하기 위해 Form으로 감싸준 것이다
TextFormField는 username, email , password로 3개이다.

border이나 Icon, size 등 기본적인 틀은 다 만들어 놓은 것을 전제로 한다.

(password는 obscureText = true로 설정해주는 센스~)

유효성 검사를 위해 TextFormField의 validator argument를 사용한다

예시를 들자면
username에는
validator : (value){
    if(value.isEmpty || value.length < 4){
        return 'Please enter at least 4 characters';
    }
    return null;
}

여기서 value는 string?을 리턴하고, 반환 된 string값은 에러메세지를 나타낼 때 사용된다.
나머지 validator도 마저 만들어보자

email에는
validator : (value){
    if(value.isEmpty || !value.contains('@'){
        return 'Please enter a valid email address';
    }
    return null;
}

마지막으로 password에는
validator : (value){
    if(value.isEmpty || value.length < 8){
        return 'Please enter at least 8 characters';
    }
    return null;
}

정도로 작성할 수 있겠다 

이제 validator를 전달하기 위해 Form에 사용할 Global Key를 만든다
final GlobalKey<Formstate> _formkey = Globalkey<FormState>();
물론 간단하게
final _formkey =  Globalkey<FormState>(); 로 선언해도 된다.
이제 Form의 key argument에 대입한다
key: _formKey

이제 _formKey를 전달받아 각 TextFormField의 validator을 검사할 메소드를 만들어준다
다시 코드 위쪽으로 올라가, Global Key 를 선언한 줄 바로 아래에 작성해주자

void _tryValidation(){
    final isValid =  _formKey.CurrentState!.validate();
    if(isValid){
        _formKey.currentState!.save();
    }
}

_formKey.CurrentState.validate() 함수는 validator 조건통과 여부에 따라 true/false를 리턴해준다.
_formKey.currentState.save()는 폼 전체의 state값을 저장해준다.
이 과정에서 onSaved 메소드가 작동된다.

 

이제 _tryValidation 함수를 쓰기 위해선

1. 함수를 작동시킬 summit 버튼

2. state값을 저장할 변수

를 만들어준다

username, email, password의 state값을 저장할 빈 String 변수를 먼저 만들어보자
String userName = ' ';
String userEmail = ' ';
String userPassword = ' ';

이제 각각 TextFormField에 onSaved 메소드를 불러와서 위의 변수들에 값을 업데이트를 해주자

username TextFormField에서
onSaved:(value){
    userName = value!;
} 

나머지 두개도 똑같이 해준다
이제 submit버튼에 기능을 넣어야 완성이 된다.
나는 버튼을 Container로 만들어 줬기 때문에 GestureDetector로 감싸서

onTap 메소드를 사용한다

onTap: (){

    _tryValidation

}

 

이제 파이어베이스로 연동하면 데이터를 저장할 수 있다.

다음 글에서 봅시다~~