Flutter/ TextField, TextFormField 하단에 Error text 띄우기

koeyhoyh·2022년 10월 5일
2

App_Flutter

목록 보기
18/19
post-thumbnail

여기서 "비밀번호가 일치하지 않습니다." 문구를 만들어 보겠습니다.


Reference

✅TextFormField: https://api.flutter.dev/flutter/material/TextFormField-class.html
☑️TextField: https://api.flutter.dev/flutter/material/TextField-class.html


핵심 코드

validator

  String? _validator(String pw, String checkPW) {
    if (pw.length < 10) {
      return ('비밀번호를 더 길게 설정해주세요.');
    }
    if (pw != checkPW) {
      return ('비밀번호가 일치하지 않습니다.');
    }
    return null;
  }

Form & Formkey

final _formKey = GlobalKey<FormState>();
Form(	// Form 을 위젯트리에서 부모 위젯으로 두고, formkey를 등록해주어야 합니다.
     key: _formKey,
     child: Column(...),)

해당 formkey는 나중에 validate를 하기 위해 필요합니다.
사용하지 않아도 validation할 수 있지만 원할 때 validation하기 위해서 사용하는 것이 편합니다 : )

if (_formKey.currentState!.validate()) {
                    Navigator.of(context).pushNamedAndRemoveUntil(
                        Routes.signUpEnd, (route) => false);
                  }

간단 설명

1. TextField가 아니라, TextFormField 를 사용해야 한다.

TextFormField는 FormField + TextField 입니다. 가장 눈에 띄는 차이점은 유효성을 검사할 수 있는 옵션이 존재하는지입니다.

TextFormField는 validator 라는 property를 가지고 있습니다.

//validator Property Type : String? Function(String?)?
  String? _validator(String pw, String checkPW) {
    if (pw.length < 10) {
      return ('비밀번호를 더 길게 설정해주세요.');
    }
    if (pw != checkPW) {
      return ('비밀번호가 일치하지 않습니다.');
    }
    return null;
  }

조건문을 통해서 String을 return하면 하단 에러 문구가 나옵니다.
null이 통과 상태 (에러를 내보내지 않는 상태) 입니다.

2. validator을 원하는 곳에서 작동시키기

여러분은 (1)번 예제를 보고 원하는 조건 식을 만들었을 겁니다! 이제는, 원하는 구간에서 언제 validation을 할지 정하면 마무리입니다!

보통은 Button이나 InkWell, GestureDetector 등으로 '확인' 버튼을 만들어서 많이 확인합니다.

ontap: () {
  if (_formKey.currentState!.validate()) {
     Navigator.of(context).pushNamedAndRemoveUntil(
       Routes.signUpEnd, (route) => false);
  }
},

if 문을 통해서 validate되었는지 확인하고, 괜찮다면 다른 여러 동작들을 수행할 수 있게 만들어줍니다!


알면 쉽게 사용할 수 있지만, 모른다면 많이 헤맬 수 있는 부분이라 한 번 정리해 보았습니다. 다른 분들도 쉽게 사용하실 수 있으면 좋겠네요 : >

혹시 어려운 점이나, 틀린 부분이 있으면 언제든 밑의 메일이나 댓글로 의견 남겨주시면 감사하겠습니다!

profile
내가 만들어낸 것들로 세계에 많은 가치를 창출해내고 싶어요.

1개의 댓글

comment-user-thumbnail
2022년 11월 20일

블로그 자주 올려주세요! 유익하네요 ^^

답글 달기