[Flutter][Widget] Form, TextFormField (로그인/회원가입 UI를 만들어보자)

참고 사이트
https://blog.codefactory.ai/flutter/form/
https://kibua20.tistory.com/237

서론

Flutter 에서 기본적으로 TextField 입력을 받으려면 기본적으로 TextEditingController 를 사용해야 합니다. TextField 가 하나면 괜찮지만 여러개가 되면 될수록 컨트롤러 관리가 굉장히 어려워지죠.

하지만 TextFormField 라는 TextField 의 살짝 변형된 위젯을 이용하면 쉽게 validation 과 값을 받아올 수 있습니다.
이번 시간엔 Form 을 사용해서 여러개의 TextFormField 를 관리하는 방법에 대해 알아보겠습니다.

validation : 텍스트의 유효성 ( (ex) 비밀번호 최소 자릿수, 이메일 @ 포함 유무)

Form 위젯

Form 이라는 위젯은 child 파라미터와 Key 파라미터를 받습니다. child 에는 TextFormField 들을 넣어주면되고 key 에는 GlobalKey 를 넣어주면 됩니다. 이 key 는 나중에 폼 내부의 TextFormField 값들을 저장하고 validation 을 진행하는데 사용됩니다.

GlobalKey : 외부 위젯에서 해당 위젯(globalkey가 등록된 위젯)의 state나 element에 접근하기 위한 key.

final formKey = GlobalKey<FormState>();
//제네릭스를 FormState ==> Form 위젯에 대한 global key 이다.

 @override
 Widget build(BuildContext context) {
   return DefaultAppbarLayout(
     child: Form(
       key: this.formKey, //key 등록 
       child: Column(
         children: [ 
           // 여기에 TextFormField 들을 입력할거예요!
         ],
       ),
     ),
   );
 }

TextFormField 위젯 생성 함수

 //Form - TextFormField 입력한 text 관리하기 위한 state들
  final _formKey = GlobalKey<FormState>();
  String userEmail = '';
  
  //Form의 모든TextFormField의 Validation == true 이면, 입력한 모든 text 저장하기.
  void _tryValidation() {
    final isValid = _formKey.currentState!.validate(); //bool 값 return ==> Validation이 true || false
    if (isValid) {
      //모든 TextFormField의 값 저장하기.
      _formKey.currentState!.save();
    }
  }
  
  
Form(
          key: _formKey,
          child: Column(
              children: [
              TextFormField(
              key: ValueKey(1),
          validator: (value) {
            if (value!.isEmpty ||
                value.length < 4) {
              return 'Please enter at least 4 characters';
            } else {
              return null;
            }
          },
          onSaved: (value) {
            setState(() {
              userEmail = value!;
            });
          },
          onChanged: (value) {
            setState(() {
              userEmail = value;
            });
          },
          decoration: InputDecoration(
              prefixIcon: Icon(Icons.email),
              iconColor: Palette.iconColor,
              enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      color: Palette.textColor1),
                  borderRadius: BorderRadius.all(
                      Radius.circular(35))),
              focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      color: Palette.textColor1),
                  borderRadius: BorderRadius.all(
                      Radius.circular(35))),
              hintText: 'User Email',
              hintStyle: TextStyle(
                  fontSize: 14,
                  color: Palette.textColor1),
              contentPadding: EdgeInsets.all(10)),
        ),
      )
    );