Form, TextFormField

폼과 검증

 

텍스트 필드 한개가 있는 폼을 어떻게 검증하는지 알아보자

1.GlobalKey를 가지는 Form 생성

2.검증로직을 가진 TextFormField 추가

3.폼에 검증(validation)과 제출(submit)을 하는 버튼 추가

 

 

 

1.GlobalKey를 가지는 Form 생성

Form위젯은 여러개의 폼필드를 그룹핑하고 검증하도록 동작합니다.

폼을 생성할 때.  GlobalKey를 넣어줘야합니다. 이것으로 폼을 구분하고 나중에 검증할 때 사용합니다.

 

 

키생성

final _formKey = GlobalKey<FormState>();

 

 

_formKey를 사용해서 Form위젯 빌드

Form(

          key : _formKey,

          child: Column(

            children: [],

          ),

      )

 

 

2.검증로직을 가진 TextFormField 추가

TextFormField는  TextField를 Form으로 감싸고 있습니다.

그래서 검증이나 다름 폼필드와도 연동이 가능합니다.

 

TextFormField는 검증 오류가 발생하면 에러를 화면에 표시해 줄 수 있습니다.

입력값은 validator에 넣어준 함수로 검증합니다.

함수는 에러메시지를 문자열로 리턴합니다. 에러가 없을 때는 null를 리턴합니다.

 

 

 

TextFormField(

  validator: (value){

   if(value.isNotEmpty){

      return "Please Enter some Text";

    }

    return null;

 },

)

 

 

 

3.폼에 검증(validation)과 제출(submit)을 하는 버튼 추가

   ElevatedButton(

     onPressed: (){

        if(_formKey.currentState.validate()){

          Scaffold.of(context).showSnackBar(SnackBar(content: Text("Processing data"),));

       }

      },

      child: Text("submit"),

    )

 

3-1.snackBar 출력방법

final scaffoldKey = GlobalKey<ScaffoldState>();

 

 

Scaffold(

key : scaffoldKey,

 

 

 

scaffoldKey.currentState.showSnackBar(SnackBar(content:Text("Processing data")));

4. 버튼 enable, disable 방법

btnEnabled 변수를 활용하여 처리함.

[전체소스]

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: MyCustomForm(appTitle)
    );
  }
}



class MyCustomForm extends StatefulWidget {

  String title;

  MyCustomForm(this.title);

  @override
  MyCustomFormState createState() {
    print(" MyCustomForm    createState");
    return MyCustomFormState();
  }

}

class MyCustomFormState extends State<MyCustomForm>{

  final _formKey = GlobalKey<FormState>();

  final scaffoldKey = GlobalKey<ScaffoldState>();

  String inputId = "";
  String inputPw = "";

  bool _btnEnabled = false;

  @override
  Widget build(BuildContext context) {

    //3번 호출되는데 이유를 모르겠다.
    print(' bbbbbbbbbbbbbbbbbbuild');

    return
      Scaffold(
        key : scaffoldKey,
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body:Form(
            key : _formKey,
            onChanged: (){
              var b = _formKey.currentState.validate();
              setState(() => _btnEnabled = _formKey.currentState.validate());
              print(" bbbbbbbbbbbbbbbbb ${b}");
            },
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                children: [
                  TextFormField(
                    autofocus: true,
                    validator: (value){
                      print("id) value.isEmpty : ${value.isEmpty}");
                      if(value.isEmpty){
                        // _btnEnabled = false;
                        return "아이디를 입력해주세요";
                      }
                      // _btnEnabled = true;
                      return null;
                    },
                    decoration: InputDecoration(
                                      labelText: "ID", 
                                      hintText:"아이디",),

                    //_formKey.currentState.save();로 호출
                    onSaved: (value){
                      inputId = value;
                    },
                  ),
                  TextFormField(
                    validator: (value){
                      if(value.isEmpty){
                        return "패스워드를 입력해주세요";
                      }

                      return null;
                    },
                    decoration: InputDecoration(
                                        labelText: "PW", 
                                        hintText:"패스워드",),

                    //_formKey.currentState.save();로 호출
                    onSaved: (value){
                      inputPw = value;
                    },
                  ),
                  RaisedButton(
                    onPressed: _btnEnabled == true ? (){
                      if(_formKey.currentState.validate()){
                        ///이걸해줘야. 폼들 각각의 onSaved가 호출되어
                                               ///inputId, inputPw에 값이 들어간다.
                        _formKey.currentState.save();
                        scaffoldKey.currentState.showSnackBar(
                            SnackBar(
                                content:Text('Processing data  inputId : ${inputId}, inputPw : ${inputPw}')));
                      }
                    } : null,
                    child: Text("submit"),
                  )
                ],
              ),
            )
        ),
      );
  }
}