[Flutter]Form, Global Key, TextFormField 사용

Form 위젯의 전형적인 사용은 Login 페이지 이다

즉, id와 password 를 받는 페이지를 만드는 경우를 생각하면 이해가 쉬울 것이다

id와 password를 받는 부분과 제출하는 submit 버튼으로 구성된 화면이다

 

1. Global Key를 만든다

   앱에서 유일한 key( 또는 id)를 생성하는 것으로 Form 내에 사용되는 TextFormField 위젯내에 접근이 가능하다

   final GlobalKey<Formstate> _formkey = Globalkey<FormState>( );

 

2. Form 및 TextFormField 위젯 사용

    // 각 TextFormField 위젯의 입력값을 가져오기 위한 Controller를 선언한다

    final TextEditController _emailController = TextEditController( );

    final TextEditController _passwordController = TextEditController( );

 

    Form(

        key: _formkey;

        child: Column(

            TextFormField(

            controller: _emailController,

            decoration: InputDecoration( 

                        ....

           ),

           validator: (String value) {   <= 입력된 값은 value에 저장되어 있다

               if( value.isEmpty ) {

                   return "please input correct email.";   <= 화면에 출력할 error 메시지

               }

               return null;    <= 에러가 없으면 null을 돌려준다

            },

         ),

        TextFormField(

            controller: _emailController,

            decoration: InputDecoration( 

                        ....

           ),

           validator: (String value) {     <= 입력된 값은 value에 저장되어 있다

               if( value.isEmpty ) {   

                   return "please input correct email."; 

               }

               return null;  

            },

        ),

 

3. Login과 Password를 제출하는 버튼 처리

RasisedButton(

    ....

    onPressed: ( ) {

        if(_formkey.currentState.validate( ) ) {    <= _formkey를 통하여 Form 위젯에 접근한다.

            print("_emailController.text.toString());  <= 에러가 없으면 터미널 창에 입력한 email이 출력된다

       }

    }),

 

_formkey.currentState.validate( ) 

=> 여기서 validate( )는 Form 웨젯의 child로 사용되는 TextFormField 내에 있는 

    validator: (String value) 를 실행한다.

    이 예제에서는 email과 password에 있는 2개의 validator: (String value)를 실행한다