텍스트 필드가 선택되고 input에 입력을 하게되면 focus, 즉 초점이 맞춰진다.
포커스 관리는 직관적인 흐름으로 양식을 만들기 위한 기본 도구입니다. 예를 들어 텍스트 필드가 있는 검색 화면이 있다고 가정합니다. 사용자가 검색 화면으로 이동할 때 검색어의 텍스트 필드에 포커스를 설정할 수 있습니다. 이를 통해 사용자는 텍스트 필드를 수동으로 누를 필요 없이 화면이 표시되는 즉시 입력을 시작할 수 있습니다.
표시되는 즉시 focus 주기
앱에서 텍스트 필드가 표시되자마자, focus를 주려면 이 autofocus속성을 사용해야 한다.
TextField(
autofocus: true,
);
버튼을 누를 때 focus 주기
1) FocusNode 생성하기
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
State<MyCustomForm> createState() => _MyCustomFormState();
}
// Define a corresponding State class.
// This class holds data related to the form.
class _MyCustomFormState extends State<MyCustomForm> {
late FocusNode myFocusNode;
@override
void initState() {
super.initState();
myFocusNode = FocusNode(); // 생성
}
@override
void dispose() {
myFocusNode.dispose(); // 삭제
super.dispose();
}
- Form widget생성시 focusnode를 생성해준다.
- Form widget삭제시에도 focusnode를 삭제해준다.
2) FocusNode 설정하기
@override
Widget build(BuildContext context) {
return TextField(
focusNode: myFocusNode,
);
}
3) 버튼 클릭시 focus 주기
FloatingActionButton(
onPressed: () => myFocusNode.requestFocus(),
),
Focus 해제
버튼을 눌렀을 때 focus해제되는 방식으로 focus를 해제하도록 해준다.
TextButton(
onPressed: () {
myFocusNode.unfocus();
}
)
TextEditingController
💫 편집 가능한 텍스트 필드의 컨트롤러이다.
사용자가 연결된 TextEditingController 로 텍스트 필드를 수정할 때마다 텍스트 필드는 값을 업데이트 하고 컨트롤러는 해당 리스너에게 알린다. 그런 다음 리스너는 텍스트 및 선택 속성을 읽어 사용자가 입력한 내용이나 선택 항목이 어떻게 업데이트되었는지 알 수 있다. TextEditingController 를 사용하여 텍스트 필드에 대한 초기 값을 제공할 수도 있다.
TextEditingController 사용하기
1) TextEditingController 생성
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
State<MyCustomForm> createState() => _MyCustomFormState();
}
class _MyCustomFormState extends State<MyCustomForm> {
final myController = TextEditingController(); // 생성
@override
void dispose() {
myController.dispose(); //삭제
super.dispose();
}
@override
Widget build(BuildContext context) {
}
}
→ TextEditingController를 사용하기 위해서 변수선언해준다. 그리고 사용을 마치면 dispose해줘야 한다. 그렇지 않으면 개체에서 사용하는 모든 리소스를 삭제할 수 있다.
2) TextField에 TextEditingController 넣기
return TextField(
controller: myController,
);
텍스트 필드에 넣어 컨트롤러를 사용할 수 있도록 셋팅한다.
3) TextEditingController 사용
FloatingActionButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Text(myController.text),
);
},
);
},
tooltip: 'Show me the value!',
child: const Icon(Icons.text_fields),
),
→ floatingActionButton을 눌렀을 때 dialog가 뜨면서 textfield에 쓴 텍스트값을 보여주게 된다.
TextEditingController과 FocusNode 함께 사용하기
1) 기초 셋팅
final TextEditingController _filter = TextEditingController();
FocusNode focusNode = FocusNode();
late String _searchText = '';
_SearchState() {
_filter.addListener(() {
setState(() {
_searchText = _filter.text;
});
});
}
- TextEditingController과 FocusNode를 사용하기 위해서 변수로 선언해준다.
- String을 하나 선언해주어 컨트롤러에서 받아온 값을 여기에 넣어준다. 컨트롤러에서 받아온 값을 바로 보여주기 위함이다.
2) 버튼 클릭시
Expanded(
child: TextField(
focusNode: focusNode,
style: const TextStyle(fontSize: 15),
autofocus: true,
controller: _filter,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white12,
prefixIcon: const Icon(
Icons.search,
color: Colors.white60,
size: 20,
),
suffixIcon: focusNode.hasFocus
? IconButton(
icon: const Icon(
Icons.cancel,
size: 20,
),
onPressed: () {
setState(() {
_filter.clear();
_searchText = '';
});
},
)
3) 버튼 해제시
focusNode.hasFocus
? Expanded(
child: TextButton(
child: const Text('취소'),
onPressed: () {
setState(() {
_filter.clear();
_searchText = '';
focusNode.unfocus();
});
},
))
결과물
→ hasFocus를 사용하여 focus가 있으면 취소버튼이 만들어지게 설정하였다.
