TextFormField 커서 관리 : FocusNode

https://medium.flutterdevs.com/focusnode-in-flutter-4a8613d7e4f6

FocusNode in Flutter

 

 

로그인이나,정보입력창이 필요할 때 텍스트 폼필드 위젯은 필수적이다. 

 

그 텍스트폼필드 위젯을 더 편하게 사용할 수 있게 해주는 기능이 FocusNode이다. 

 

 

1. 어플을 켰을 때 로그인 아이디를 입력해야 하는 텍스트폼필드 위젯 내에 커서가 반응을 하면서 키보드가 올라온다. 

2. 아이디를 입력하고 키보드에 done을 누르면 비밀번호를 입력하는 텍스트폼필드 위젯에 커서가 옮겨진다. 

 

고객들로 하여금 편의성을 주는 중요한 기능이다.  앞으로 만들 어플에 꼭 넣어야 한다. 

 

어플을 켰을 때 텍스트폼 필드에 커서를 옮기는 사용법 

 

1. 먼저 변수를 선언해주고 initState, dispose를 실행한다. 

FocusNode id;
FocusNode password;



void initState(){
super.initState();

id = FocusNode();
password = FocusNde();
}

void dispose() {
id.dispose();
password.dispose();

}

 

 

TextFormField(
  autofocus: true, //자동으로 사용하는 파라미터 
  focusNode: id, //파라미터를 열어주고 해당 함수를 선언
  keyboardType: TextInputType.text,
  enabled: true,
  textInputAction: TextInputAction.next,  // 키보드 입력이 다 끝나면 다음 입력창으로 옮기는 기능
  decoration: InputDecoration(
    labelText: 'First Name',
    hintText: 'Enter your first name',
    border: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.teal),
    ),
  ),
  onFieldSubmitted: (term) {
    fname.unfocus();
    FocusScope.of(context).requestFocus(id);
  },
)

3. 맨 마지막 입력창에는 TextInputAction : TextInputAction.next => done 으로 변경해주면 끝난다. 

 

 

 

무조건써야 하는 기능 일듯..