TextField does not focus properly-CodePudding

Although the cursor appears when I tap on the TextField, the label does not disappear and it doesn't actually focus. Only when I tap on it again after the keyboard appears it actually focuses, the label disappears and I am able to unfocus by tapping outside of it. Also the cursor appears in a very wrong location but I guess I should ask that in a separate question. Here's my code for it:

  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(5),
      child: Row(
        children: [
          Expanded(
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(100),
              ),
              child: Container(
                margin: const EdgeInsets.only(left: 10, bottom: 10, top: 10),
                child: TextField(
                  decoration: const InputDecoration(
                    labelText: '  Enter task',
                    border: InputBorder.none,
                    floatingLabelBehavior: FloatingLabelBehavior.never,
                  ),
                  controller: textController,
                  focusNode: myFocusNode,
                  onTap: () => myFocusNode.requestFocus(),
                  onSubmitted: (_) {
                    submit();
                    myFocusNode.requestFocus();
                    textController.clear();
                  },
                ),
              ),
            ),
          ),
          CircleAvatar(
            child: TextButton(
              onPressed: submit,
              child: const FittedBox(
                child: Text(
                  'Add',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

myFocusNode is a FocusNode. Is it that the keyboard popping up messes with the focus? I have been unable to fix this.

CodePudding user response：

I suggest using autofocus: true for the first textfield in the page and textInputAction: TextInputAction.next for change the focus to the next one.

It's just simpler

CodePudding user response：

Textfield automatically assigns focus on tap. So you can remove this line

 onTap: () => myFocusNode.requestFocus(),