Flutter Web submit form on enter key

Question

Is there a way to call the submit button when a user hits the enter button when filling out a form. Here is my form code:

@override
  Widget build(BuildContext context) {
    String _email;
    return AlertDialog(
      title: Text('Password Reset'),
      content: Form(
        key: _formKey,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextFormField(
              decoration: InputDecoration(
                hintText: 'Email',
                labelText: 'Email',
              ),
              autofocus: true,
              maxLength: 30,
              validator: (value) {
                if (value.isEmpty) {
                  return 'Email is required';
                }
                return null;
              },
              onSaved: (input) => _email = input,
            ),
          ],
        ),
      ),
      actions: [
        RaisedButton(
          onPressed: () async {
            if (_formKey.currentState.validate()) {
              _formKey.currentState.save();
              var result = await auth.sendPasswordResetEmail(_email);
              print(result);
              Navigator.of(context).pop();
            }
          },
          child: Text('Reset'),
        )
      ],
    );
  }

score 31 · Accepted Answer · answered Jun 17 '20 at 10:38

31

For a TextFormField the property to handle this would be onFieldSubmitted. You can copy the code from your onPressed of the RaiseButton to this. For e.g.

onFieldSubmitted: (value) {
                if (_formKey.currentState.validate()) {
                  _formKey.currentState.save();
//               var result = await auth.sendPasswordResetEmail(_email);
//               print(result);
                  print(_email);
                  Navigator.of(context).pop();
                }
              },

A full example is available as a codepen here.

You might be interested in RawKeyboardListener as well however it doesn't recognize the enter key. But could listen to other keys such as Shift, CapsLock etc.

answered Jun 17 '20 at 10:38

Abhilash Chandran

6,803
3
32
50

1

For a `TextField` (as opposed to a `TextFormField`), the property is `onSubmitted` which is a `void Function(String)` – Stack Underflow Jul 08 '21 at 19:32
2

How does RawKeyboardListener not recognize arguably one of the most important keys on the keyboard... Is that true? – sleighty Oct 13 '21 at 03:00
@BrunoEly Yeah, it seems so. I guess it has something to do with `TextField` trying to handle it on its own – jujka Jan 06 '22 at 10:22
1

But what if I want to submit the form, not just the single field? I want to have a 'Save' button that should be triggered on 'Enter' key... Any ideas? – Savado Feb 07 '23 at 14:31

score 4 · Answer 2 · answered Jun 17 '20 at 00:56

4

Use either the onEditingComplete or onSubmitted parameters of the TextFormField constructor, depending on your needs.

answered Jun 17 '20 at 00:56

Gregory Conrad

1,324
11
19

score 0 · Answer 3 · answered Jan 15 '23 at 13:15

0

Check that the TextFormField has the textInputAction set to TextInputAction.done or TextInputAction.go

answered Jan 15 '23 at 13:15

Apoleo

2,045
2
21
37

Flutter Web submit form on enter key

3 Answers3