如何将焦点添加到具有验证错误的 textformfield

Question

I have textformfields in my form. When I click on submit button the validation error displays under the textformfield. I want to add focus to that particular field so when user clicks on save button the field pops up. user should not need to scroll up and type the info. User should be able to directly start typing. In current scenario user gets confused and is unaware of why save button didnt work. Bcoz until scrolled up the error is unknown.

 TextFormField(
                  controller: NoteController,
                   validator: (String value){
                    if(value.isEmpty)
                      {
                        return "Note can't be null";
                      }
                    else
                      return null;
                   },
                  decoration: InputDecoration(
                      border: OutlineInputBorder(
                        borderSide: const BorderSide(width: 2.0),)),
                  keyboardType: TextInputType.multiline,
                  minLines: 5,
                  maxLines: 5, 
                  onChanged: (value) {
                    this.note.note = value;
                  },

                ),

bool validateAndSave() {
    final form = globalFormKey.currentState;
    if (form.validate()) {
      form.save();
      return true;
    }
    return false;
  }

void _save() async {
    if (validateAndSave()) {
}
}

Answer 1

You can achieve that using FocusNode and TextField. you can read more about it here https://flutter.dev/docs/cookbook/forms/focus

Let me show you an example (Tried it and it works):

Before the build method:

  final FocusNode noteFocus = FocusNode();

In the build method:

 Form(
        key: _formKey,
        child: Column(
          children: [
            TextFormField(
              // Add FocusNode to TextFieldForm
              focusNode: noteFocus,
              validator: (value) {
                if (value == null || value.isEmpty) {
                  // Request focus in case of error
                  noteFocus.requestFocus();
                  return "Note can't be null";
                }
                return null;
              },
            ),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  print('Validated');
                }
              },
              child: Text('Submit'),
            )
          ],
        ),
      ),

Let me know if you need anything else:)

Answer 2

Use FocusNode like this.

FocusNode focusNode = FocusNode();

TextFormField(
                  controller: NoteController,
                  focusNode: focusNode,
                   validator: (String value){
                    if(value.isEmpty)
                      {
                        Focus.of(context).requestFocus(focusNode);
                        return "Note can't be null";
                      }
                    else
                      return null;
                   },
                  decoration: InputDecoration(
                      border: OutlineInputBorder(
                        borderSide: const BorderSide(width: 2.0),)),
                  keyboardType: TextInputType.multiline,
                  minLines: 5,
                  maxLines: 5, 
                  onChanged: (value) {
                    this.note.note = value;
                  },

                ),