[Widget] FocusNode

FocusNode 파헤치기 🐋

---

TextField에 Text를 입력하고자 할 때 일반적으로는 모든 TextField를 눌러서 포커싱이 되면 Text 입력이 가능하지만FocusNode는 자동으로 포커싱을 넘겨주거나 해주는 기능이다.

 

class _MyCustomFormState extends State<MyCustomForm> {
  // 포커스노트 선언
  FocusNode myFocusNode;

  // 폼이 생성될 때 호출
  @override
  void initState() {
    super.initState();
    // myFocusNode에 포커스 인스턴스 저장.
    myFocusNode = FocusNode();
  }

  // 폼이 삭제될 때 호출
  @override
  void dispose() {
    // 폼이 삭제되면 myFocusNode도 삭제됨
    myFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Text Field Focus')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            // 첫번째 텍스트필드
            TextField(
              // autofocus를 true로 설정하여 앱이 실행되면서 자동으로 포커스를 가진다.
              autofocus: true,
            ),
            // 두번째 텍스트필드
            TextField(
              // focusNode에 myfocusNode를 설정
              focusNode: myFocusNode,
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // 버튼이 눌리면 myFocusNode를 설정하고 있는 두번째 텍스트필드에 포커스 전달
        onPressed: () => FocusScope.of(context).requestFocus(myFocusNode),
        tooltip: 'Focus Second Text Field',
        child: Icon(Icons.edit),
      ),
    );
  }
}

 

우선, Focus를 주고 싶은 TextField에 개수만큼 FocusNode를 정의한다. (Init 할 때 해주면 된다..)

그리고 Focus를 주고 싶은 TextField에 focusNode를 설정해두고 Enter를 누르거나 할 때에 

 

FocusScope.of(context).requestFocus(변수명)

 

위의 코드를 넣으면 자동으로 Focusing이 된다.

 

 

이 예제 코드를 살펴보자

 

보통 TextField에 입력을 하고 엔터를 누르면 자동으로 Focus이 되는 경우가 편하다고 느낄 것이다.

이때에는 onFieldSumitted Property를 사용해서 Focus를 해제하고 다음 Focus를 Request 할 수 있다!

 

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final FocusNode fnOne = FocusNode();
    final FocusNode fnTwo = FocusNode();

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextFormField(
                textInputAction: TextInputAction.next,
                focusNode: fnOne,
                onFieldSubmitted: (term) {
                  fnOne.unfocus();
                  FocusScope.of(context).requestFocus(fnTwo);
                },
              ),
              TextFormField(
                focusNode: fnTwo,
                enabled: false,
              ),
            ],
          ),
        ),
      ),
    );
  }
}