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'),
        )
      ],
    );
  }

Alkaloid

Answer 1

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.

Taritariff

For a TextField (as opposed to a TextFormField), the property is onSubmitted which is a void Function(String) – Phosphine

How does RawKeyboardListener not recognize arguably one of the most important keys on the keyboard... Is that true? – Nanny

@BrunoEly Yeah, it seems so. I guess it has something to do with TextField trying to handle it on its own – Reel

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? – Hereabouts

@Hereabouts are you found this solution? – Violone

Answer 2

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

Busboy

Answer 3

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

Mccubbin