[Flutter] 선택된 위젯을 관리하는 Focusnode

- textfield를 선택했을 때, 다른 위젯이 변하거나 생성되게 하는 경우

- textfield에 데이터를 입력 후 키보드의 next, done 버튼을 터치했을 때 다음 textfield로 자동으로 넘어가게 할 경우

 

 

주로 textfield에서 사용되며 말 그대로 focus가 어디에 있는지를 관리한다.

controller와 마찬가지로 textfield 하나 당 하나의 focusnode를 할당해주면 된다.

textfield가 선택되면 해당 focusnode는 포커스를 획득하는 단순한 구조이다.

 

 

textfield에 focusnode 할당

  FocusNode _focusNode = FocusNode();
  
  ..
  
  
	TextField(
                            focusNode: _focusNode,
                            ..
                            

 

focusnode를 제거하여 아무것도 선택되지 않은 상태로 한다.

//가상의 포커스를 생성
FocusScope.of(context).requestFocus(FocusNode());

혹은

//이전 포커스의 포커스를 삭제
FocusManager.instance.primaryFocus.unfocus();

예를 들어 텍스트필드에서 뒤로가기 버튼을 눌러 키보드가 닫히는 경우에 focusnode를 제거하는 용도로 사용가능하다.

두 함수 모두 동일한 기능을 한다.

FocusScope에 대해서는 포스팅 예정.

 

 

포커스 이동에 따른 액션 (focus listener)

void initState(){
	_focusListen(); //생성자에서 리스너가 선언되어야함.

..



_focusListen() { //여러 focusnode의 리스너를 이 곳에서 생성시킨다.
    _focusNode.addListener(() {  
      if (_focusNode.hasFocus) { //포커스노드가 포커스를 가지고 있을 때
        
        
        
        });
      } else if (!_searchFocus.hasFocus) { //포커스노드가 포커스를 가지고 있지 않을 때
        
        
        
      }
    });
  }

 

 

각 포커스노드마다 리스너를 지정해주면 각 포커스들이 포커스를 획득했을 때, 해당 리스너들을 호출하여 발동한다.