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,
),
],
),
),
),
);
}
}
'Flutter > Widget' 카테고리의 다른 글
[Widget] Is there a way to load async data on initState method? (0) | 2021.12.07 |
---|---|
[Widget] CheckBox (0) | 2021.11.30 |
[Widget] TextField, TextFormField (validate) (0) | 2021.11.30 |
[Widget] WillPopScope (0) | 2021.11.23 |
[Widget] TextSpan의 height에 관련된 이야기 (0) | 2021.11.21 |