Flutter 플러터에서 TextField가 선택되었을 때 어떻게 감지할 수 있나요?, How to detect when a TextField is selected in Flutter?

질문

저는 선택된 필드가 표시될 때 소프트 키보드에 의해 가려지는 플러터 텍스트 필드를 가지고 있습니다. 키보드가 표시될 때 필드를 스크롤하여 키보드를 피하고 싶습니다. 이는 꽤 일반적인 문제이며 이 StackOverflow 게시물에서 해결책이 제시되어 있습니다.

ScrollController 부분은 해결했지만, TextField가 선택되었을 때 어떻게 감지할 수 있을까요? 이벤트 메서드 (예: onFocus(), onSelected(), onTap() 등)가 없어 보입니다.

저는 TextField를 GestureDetector로 래핑해 보았지만, 이벤트가 캡처되지 않은 것 같습니다.

new GestureDetector(
  child: new TextField(
    decoration: const InputDecoration(labelText: 'City'),
  ),
  onTap: () => print('Text Selected'),
),

이는 매우 기본적인 요구사항이므로 쉬운 해결책이 있을 것으로 알고 있습니다.

답변

아마도 FocusNode를 찾고 계실 것으로 생각됩니다.

포커스 변경을 듣기 위해서는 FocusNode에 리스너를 추가하고 focusNode를 TextField에 지정할 수 있습니다.

예시:

class TextFieldFocus extends StatefulWidget {
  @override
  _TextFieldFocusState createState() => _TextFieldFocusState();
}

class _TextFieldFocusState extends State<TextFieldFocus> {
  FocusNode _focus = FocusNode();

  TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _focus.addListener(_onFocusChange);
  }

  @override
  void dispose() {
    super.dispose();
    _focus.removeListener(_onFocusChange);
    _focus.dispose();
  }

  void _onFocusChange() {
    debugPrint("Focus: ${_focus.hasFocus.toString()}");
  }
  
  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.white,
      child: new TextField(
        focusNode: _focus,
      ),
    );
  }
}

이 gist는 포커스된 노드가 UI에서 보이도록 하는 방법을 나타냅니다.