How can I correctly focus a Textfield that is conditionally created based on the focus node's hasFocus value?

Question

With my current code the TextField becomes focused, but the cursor and keyboard aren't triggered (requires a second tap). I believe this is because the TextField doesn't exist when the focus node is initially focused, but I'm struggling to find a solution.

Here is a simple recreation of the problem based on a Cookbook recipe:

class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  FocusNode myFocusNode;
  bool _editingField2 = false;

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

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

  // Set _editingField2 to true when focusNode has focus.
  _focusListener() {
    if (myFocusNode.hasFocus) {
      setState(() {
        _editingField2 = true;
      });
    } else {
      setState(() {
        _editingField2 = false;
      });
    }
  }

  @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: [
            // The first text field is focused on as soon as the app starts.
            TextField(
              autofocus: true,
            ),
            // The second text field is created when _editingField2 (after FAB press).
            _editingField2
                ? TextField(
                    focusNode: myFocusNode,
                  )
                : Text('ayy'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // Give focus node focus on FAB press.
        onPressed: () => FocusScope.of(context).requestFocus(myFocusNode),
        tooltip: 'Focus Second Text Field',
        child: Icon(Icons.edit),
      ),
    );
  }
}

Here is my code, with important bits commented.

class TaskListItem extends StatefulWidget {
  final Task task;

  TaskListItem({@required this.task});

  @override
  State createState() => _TaskListItemState();
}

class _TaskListItemState extends State<TaskListItem> {
  bool _isEditing;
  FocusNode _focusNode;
  final TextEditingController _textEditingController = TextEditingController();

  @override
  initState() {
    super.initState();
    _isEditing = false;
    _textEditingController.text = widget.task.text;
    _textEditingController.addListener(_handleTextFieldUpdate);
    _focusNode = FocusNode(debugLabel: 'TaskListItem');
    _focusNode.addListener(_handleFocusChange);
  }

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

  _handleTextFieldUpdate() {
    Provider.of<TaskListModel>(context, listen: false)
        .updateTaskText(widget.task, _textEditingController.text);
  }

  // Update state to determine if Text or TextField widget is created in build().
  _handleFocusChange() {
    if (_focusNode.hasFocus) {
      setState(() {
        _isEditing = true;
      });
    } else {
      setState(() {
        _isEditing = false;
      });
    }
  }

  Widget _buildTitle() {
    return Row(
      children: <Widget>[
        Expanded(
          // Create either TextField or Text based on _isEditing value.
          child: _isEditing && !widget.task.isComplete
              ? TextField(
                  focusNode: _focusNode,
                  controller: _textEditingController,
                )
              : Text(
                  widget.task.text,
                  style: widget.task.isComplete
                      ? TextStyle(decoration: TextDecoration.lineThrough)
                      : null,
                ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Checkbox(
        value: widget.task.isComplete,
        //Dismiss focus when box is checked
        onChanged: (bool checked) {
          _focusNode.unfocus();
          Provider.of<TaskListModel>(context, listen: false)
              .toggleComplete(widget.task);
        },
      ),
      title: _buildTitle(),
      trailing: IconButton(
        icon: Icon(Icons.delete),
        onPressed: () => Provider.of<TaskListModel>(context, listen: false)
            .deleteTask(widget.task),
      ),
      onTap: () {
        // I'm requesting focus here, but the Textfield doesn't exist yet?
        FocusScope.of(context).requestFocus(_focusNode);
        print('tapped');
      },
    );
  }
}

Answer 1

What you have to do is change focus inside build, you're trying to change focus before the screen has done rebuilding that widget already. try this please, using your own code.

I'm not sure if you needed to really listen to that focus change or if you only wanted to accomplish the focus change after enabling the widget, if you do want to listen for the focus change let me know.

class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  FocusNode myFocusNode = FocusNode();
  bool _editingField2 = false;

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

  @override
  Widget build(BuildContext context) {

   //here you do the focus request
   if (_editingField2) {
      FocusScope.of(context).requestFocus(myFocusNode);
   }

    return Scaffold(
      appBar: AppBar(
        title: Text('Text Field Focus'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // The first text field is focused on as soon as the app starts.
            TextField(
              autofocus: true,
            ),
            // The second text field is created when _editingField2 (after FAB press).
            _editingField2
                ? TextField(
                    focusNode: myFocusNode,
                  )
                : Text('ayy'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // Give focus node focus on FAB press.
        onPressed: () {
          setState(() {
            _editingField2 = true;
          });
        },
        tooltip: 'Focus Second Text Field',
        child: Icon(Icons.edit),
      ),
    );
  }
}