如何在 web TextField 的 Flutter 上触发 onSubmitted

Question

I have a small flutter app for the web and am showing a TextField.

I now need a callback like onSubmitted whenever the user either leaves the TextField (focus loss) or presses the Enter key. Right now I can't make any callback happen at all.

TextField(
  decoration: InputDecoration(
    labelText: 'Name',
  ),
  controller: TextEditingController(text: event.name),
  onEditingComplete: () { print("editing complete"); },
  onSubmitted: (String value) { print("submitted\n"); },
  maxLines: 1,
),

Answer 1

This works for me on Flutter Web

            TextField(
              controller: _passwordController,
              decoration: InputDecoration(
                labelText: 'Password',
              ),
              obscureText: true,
              onSubmitted: (value) {
                _loginPresenter.login(
                    _usernameController.text, _passwordController.text);
              },
            ),

Note the definition of onSubmitted . When the user presses the Enter key on flutter web, the loginPresenter.login method will be called.

Answer 2

It seems to be an issue: [web]: TextField onSubmitted is not triggered when pressing enter

This is a workaround mentioned in the link:

    body: RawKeyboardListener(
      focusNode: focusNode,
      onKey: (event) {
        if (event is RawKeyUpEvent && event.data is RawKeyEventDataAndroid) {
          var data = event.data as RawKeyEventDataAndroid;
          if (data.keyCode == 13) {
            debugPrint('onSubmitted');
          }
        }
      },
      child: TextField(),
    ),

Answer 3

Also removing the maxLines: 1 seems to get the onsubmitted to work.[Faced the same issue on mobile]

Answer 4

You can try this create a methode where you make a condition on your TextEditingController and based on that you can submite on your TextField.

• First

   final entredTitle = titleController.text;
   final entredAmount = double.parse(amountController.text);
   if (entredTitle.isEmpty || entredAmount <= 0 ){
     return ;
   }
   widget.addTx(entredTitle,entredAmount);
   Navigator.of(context).pop();
 } 

• Second

 TextField(
                      decoration:  InputDecoration(labelText: 'Amount'),
                      controller: amountController,
                      onSubmitted: (_) => submitData(),
                    ),