[Flutter] focus 해제/요청하기, 키보드 내리기 (TextField)

✍ TextField 에서 Focus 다루기

TextField 의 autoFocus 를 true 로 하면 그 TextField 에 focus가 잡히면서 키보드가 자동으로 올라간다.

TextField(
  autoFocus: true
)

 

 

😶 코드로 Focus 요청하기

사용자가 TextField 를 클릭하거나 액션 버튼을 눌렀을 때 다음 TextField 로 focus 가 넘어가는 등 이외에도 코드로 포커스를 잡거나 해제할 수 있다. 바로 FocusNode 를 사용한다.

FocusNode = myFocusNode = FocusNode();

// TextField 에 focusNode 연결
TextField(
  focusNode: myFocusNode;
);

// 연결된 TextField 에 포커스 주기
myFocusNode.requestFocus();

// FocusNode 해제
myFocusNode.dispose();

 

 

 

예시) Focus 버튼을 누르면 두번째 TextField 에 Focus 요청하기

import 'package:flutter/material.dart';

void main() =>
    runApp(MaterialApp(home: Scaffold(body: SafeArea(child: _HomeScreen()))));

class _HomeScreen extends StatefulWidget {
  _HomeScreen({Key? key}) : super(key: key);

  @override
  State<_HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<_HomeScreen> {
  late FocusNode myFocusNode;

  @override
  void initState() {
    myFocusNode = FocusNode();
    super.initState();
  }

  @override
  void dispose() {
    myFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(),
          TextField(focusNode: myFocusNode),
          ElevatedButton(
            onPressed: () {
              myFocusNode.requestFocus();
            },
            child: Text("focus"),
          ),
        ],
      ),
    );
  }
}

 

 

 

 

 

😶 액션 버튼으로 다음 TextField 로 이동하기

액션 버튼의 동작을 결정하는 건 TextField 의 textInputAction 의 인자값을 TextInputAction.next 로 하면 액션 버튼이 "다음" 값을 가지고, 클릭 시 다음 TextField 가 있으면 포커스가 넘어간다.

 

 

예시)

import 'package:flutter/material.dart';

void main() =>
    runApp(MaterialApp(home: Scaffold(body: SafeArea(child: _HomeScreen()))));

class _HomeScreen extends StatefulWidget {
  _HomeScreen({Key? key}) : super(key: key);

  @override
  State<_HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<_HomeScreen> {

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(textInputAction: TextInputAction.next),
          TextField(textInputAction: TextInputAction.next),
          TextField(),
        ],
      ),
    );
  }
}

 

 

 

 

😶 포커스 해제 (키보드 내리기)

액션 버튼을 클릭하는 것 외에 포커스를 해제하는 방법은 빈 FocusNode() 를 요청하면 결과적으로 포커스를 해제하는 것이 된다.

FocusScope.of(context).requestFocus(FocusNode());

 

 

예시) 바탕화면을 누르면 포커스 해제

import 'package:flutter/material.dart';

void main() =>
    runApp(MaterialApp(home: Scaffold(body: SafeArea(child: _HomeScreen()))));

class _HomeScreen extends StatefulWidget {
  _HomeScreen({Key? key}) : super(key: key);

  @override
  State<_HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<_HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        // 포커스 해제
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: Container(
        color: Colors.white,
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: const Center(
          child: TextField(
            textInputAction: TextInputAction.next,
            autofocus: true,
          ),
        ),
      ),
    );
  }
}