TextFormField 위젯

Flutter 사용자 입력 값 검증 위한 Form validation과 TextFormField (Sample code) (tistory.com)

Flutter 사용자 입력 값 검증 위한 Form validation과 TextFormField (Sample code)

 

위 블로그를 보고 많은 도움을 받았습니다. 

 

현재 만들고 싶어하는 원가계산기에 TextformField가 필요해서 공부를 했습니다. 

 

 

TextField 와 TextformField

 

어플에서 사용자의 데이터를 받아야 하는 상황에 가장 많이 쓰이는 것이 

TextField 입니다. 하지만 입력 받아야할 data가 많아지게되면 불편합니다. 

이에 한번에 Form으로 TextField의 State까지 관리하는 위젯이 나왔습니다. 

오늘 공부한 TextFormField 입니다. 

 

 

TextFormField 필요한 것 

1. Global Key 

class _HomePageState extends State<HomePage> {


  final _formkey = GlobalKey<FormState>();  //키 선언, <FormState>와 연결

  String ingrentName='';
  int ingrentWeight=0;
  int ingrentPirce = 0;

 

 

2. TextFormField

• -  onSaved 함수:  onSaved(value)로 전달하는 value 값이 사용자 입력 값이고, setState() {} 함수가 필요합니다.
•  
• 2.validator 함수:  validator(value)로 전달하는 value값의 조건, 그 값이 일치하는지 확인 합니다. Validation 조건이 맞지 않는 경우 TextFormField 하단에 에러 메시지를 리턴하고, 조건에 맞는 정상 값은 null 을  return 합니다.
•  
• 3.autovalidateMode: 사용자 입력 값을 onSaved() 호출할 때 validation 할지, 변경할 때마다 항상 값이 조건에 맞는지  설정합니다. AutovalidationMode.always로 설정하면 사용자가 입력할 때마다 조건값 확인을 진행합니다. 

body: Form(
        key: _formkey,
        child: Column(
          children: [
            TextFormField(
              maxLength: 10,
              autovalidateMode: AutovalidateMode.always, //validation이 항상 실행됨
              keyboardType: TextInputType.multiline,
              decoration: InputDecoration(
                  label: Text(
                '재료이름 예)고추장',
                style: TextStyle(fontSize: 10, fontWeight: FontWeight.bold),
              ),
              ),
              
              //변견된 값으로 인해 새롭게 ui를 구성하기 위해서 setState를 사용
              onSaved: (val) {
                setState(() {
                  ingrentName = val as String;
                });
              },
				
                //입력된 값이 조건식과 맞는지 확인 하는 절차 
              validator: (val){
                if(val==null|| val.isEmpty){
                  return '재료명을 입력하세요';
                }
                return null;
              },

 

 

 

3. Button에 함수 

 

마지막 단계는 버튼 누를 때 처리하는 onPressed() 함수를 구현합니다.  _formKey 값을 활용하여 사용자의 값과  validate 결과를 확인하고  _formKey.currentState!. save() 함수로 각 TextFormField의 onSaved() 함수를 호출하여 state 값을 저장합니다. ScaffoldMessenger는 정상 처리 결과를 확인하기 위한 임시 코드이고, 실제에서 사용자 입력한 값을 LocalStorage에 값을 저장 또는 서버에 값을 전달합니다. 

 

         SizedBox(height: 30,),
         Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             ElevatedButton(onPressed: (){
             
             //_formkey가  현재 상태와 조건이 맞는지 확인하고 그에 따라 값을 저장하는 식 
               if(_formkey.currentState!.validate()) {
                 ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('저장완료')));
               }



             }, child: Text('등록')),
           ],

 

 

 

값이 =null 이면 재료명을 입력하세요 메세지가나옴

 

 

 

 

값이 이력하면 데이터가 저장 됨