Flutter TextField onTopOutside: can not refocus after unfocus

Question

      Scaffold(
          appBar: AppBar(title: const Text('Example')),
          body: SizedBox(
            width: 100,
            height: 40,
            child: Builder(builder: (context) {
              return TextField(onTapOutside: (event) {
                FocusScope.of(context).unfocus();
              });
            }),
          ))

onTapOutside: lose focus on tap outside. but the TextField could not regain focus when tapping the text field.

Answer 1

 class _ExamplePageState extends State<ExamplePage> {   final FocusNode _focusNode = FocusNode();

  @override   void initState() {
    super.initState();

    // Listen to focus changes to handle unfocus logic properly
    _focusNode.addListener(() {
      if (!_focusNode.hasFocus) {
        print('TextField lost focus');
      }
    });   }

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

  @override   Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const                   Text('Example')),
      body: GestureDetector(
        onTap: () {
          // Unfocus the TextField when    tapping outside of it
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Center(
          child: SizedBox(
            width: 100,
            height: 40,
            child: TextField(
              focusNode: _focusNode,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Tap me',
              ),
            ),
          ),
        ),
      ),
    );   } }