flutter - 需要双击按钮来获取 FocusNode

Question

I have this simple code which contains a TextField and a Edit button. TextField is having hint text initially. When user clicks on the Edit button I want to enable the textfield and open the keyboard for editing that value.

 Row(
        children: [
          Container(
            width: MediaQuery.of(context).size.width - 100,
            margin: const EdgeInsets.symmetric(horizontal: 16),
            child: TextFormField(
              focusNode: myFocusNode,
              key: Key("editusernamekey"),
              decoration: InputDecoration(
                hintText: "Username",
                hintStyle: TextStyle(color: Colors.white),
              ),
              enabled: editprovider.isEnabled,
            ),
          ),
          IconButton(
            icon: Icon(Icons.edit, color: Colors.white),
            onPressed: () {
              print("onpressed get called this time");
              myFocusNode.requestFocus();
              editprovider.isEnabled = true;
            },
          ),
        ],

The "editProvider" is a variable declared in a another class whose code is as follows:

class UpdateDataProvider with ChangeNotifier {
  bool _isEnabled = false;

 bool get isEnabled => _isEnabled;
  set isEnabled(bool value) {
    this._isEnabled = value;
    notifyListeners();
  }
}

The issue is it's working but I need to tap two times on the button in order to get focus on textfield. This is my ui:

Also I wanted to know How I can run a Update Query on the database without the document Id. Suppose I have to do a query like update usersTable set name = "Abc" where rollno = 12; this is sql form query. how this can be done in flutter. Thank you for any help..

Answer 1

I had the same problem. what I did was first enable the text field and then after waiting for 20 milliseconds I used the focus node. like this:

Row(
    children: [
      Container(
        width: MediaQuery.of(context).size.width - 100,
        margin: const EdgeInsets.symmetric(horizontal: 16),
        child: TextFormField(
          focusNode: myFocusNode,
          key: Key("editusernamekey"),
          decoration: InputDecoration(
            hintText: "Username",
            hintStyle: TextStyle(color: Colors.white),
          ),
          enabled: editprovider.isEnabled,
        ),
      ),
      IconButton(
        icon: Icon(Icons.edit, color: Colors.white),
        onPressed: () {
          print("onpressed get called this time");
          editprovider.isEnabled = true; // changed here and line below
          Timer(Duration(milliseconds: 20), (){
          myFocusNode.requestFocus();});
        },
      ),
    ],

It seems like they need time to first enable the field and then focus on it. Depending on your work the time may be longer or shorter. Mine was in the same class so maybe with a provider, you would need more time. I hope it works.

Answer 2

It looks like StatelessWidget is used. If it is, then widget at first gets focus, then it rebuilds from scratch with new FocusNode, and you have to tap it second time to request for new FocusNode. One possible solution is to convert your widget to StatefulWidget and put FocusNode initialization in initState().