How to use Key Press Event on TextFromField in Flutter?

问题

Is there any way to catch a keypress in textfield? In my case, when the user press enter key inside the text field, the values will be stored. For this to happen, I need to use Keypress-event like in Kotlin+Android. I just started trying flutter this week since it is interesting and cross-platform.

RawKeyboardListener(
  child: TextFormField(
    keyboardType: TextInputType.text,
    decoration: new InputDecoration(labelText: "Phone"),
    validator: (val) => val.length == 0 ? 'Enter your phone' : null,
    onSaved: (val) => this.phone = val,
  ),
   focusNode: FocusNode(),
   onKey: (RawKeyEvent event) {
     print(event.data.logicalKey.keyId);
     if (event.runtimeType == RawKeyDownEvent ) {
       print("asdadda");

     }
   },
),

But I don't know why it doesn't work however I press key.

回答1:

I am sure what you're looking for is TextField's onSubmitted. What does this do is, on press of Enter on your keyboard, it gives you the value, which it takes as a param/args. For more info about this, you can checkout this: onSubmitted Property TextField

How you can do this, it is a property of TextField, you just have to simply do this to get your task done.

You can also do anything inside this property.

TextField(
  onSubmitted: (value){ 
     print(value);
     // or do whatever you want when you are done editing
     // call your method/print values etc
  }
)

Read more about TextField Class also. This will help you in many ways. Hope that will help you in your case. Happy learning :)

回答2:

As Alok suggested, I looked into onSubmitted method. I use TextfromField, so I choose onFieldSubmitted method in my case. And I also added RawKeyBoardListener for physical Enter key press from mobile scanner device. And the code is -

RawKeyboardListener(//for physical keyboard press
              child: TextFormField(
                keyboardType: TextInputType.text,
                decoration: new InputDecoration(labelText: "Phone"),
                validator: (val) => val.length == 0 ? 'Enter your phone' : null,
                onSaved: (val) => this.phone = val,
                onFieldSubmitted: (_) async {
                  print("asdadda");
                  submitContact();
                },
              ),
               focusNode: FocusNode(),
               onKey: (RawKeyEvent event) { 
                 print(event.data.logicalKey.keyId);
                 if (event.runtimeType == RawKeyDownEvent  &&
                     (event.logicalKey.keyId == 4295426088))//Enter Key ID from keyboard
                 {
                   print("asdadda");
                   submitContact();
                 }
               },
            ),

Feel free to edit ^_^

回答3:

There are two ways to do 1). Using the onChanged method which comes with the TextField widget like this,

TextField(
  onChanged: (text) {
    print("First text field: $text");
  },
);

2). Use a TextEditingController

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Retrieve Text Input',
      home: MyCustomForm(),
    );
  }
}

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

// Define a corresponding State class.
// This class holds data related to the Form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  final myController = TextEditingController();

  @override
  void initState() {
    super.initState();

    myController.addListener(_printLatestValue);
  }

  @override
  void dispose() {
    // Clean up the controller when the widget is removed from the widget tree.
    // This also removes the _printLatestValue listener.
    myController.dispose();
    super.dispose();
  }

  _printLatestValue() {
    print("Second text field: ${myController.text}");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retrieve Text Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              onChanged: (text) {
                print("First text field: $text");
              },
            ),
            TextField(
              controller: myController,
            ),
          ],
        ),
      ),
    );
  }
}

Example taken from the https://flutter.dev/docs/cookbook/forms/text-field-changes

回答4:

Just wrap your TextFormField with GestureDetector, then add event onTap:

GestureDetector(
    onTap: () {
      setState(() {
        // Add event here
      });
    },
    child: TextFormField(
      keyboardType: TextInputType.text,
      decoration: new InputDecoration(labelText: "Phone"),
      validator: (val) => val.length == 0 ? 'Enter your phone' : null,
      onSaved: (val) => this.phone = val,
    ),
  ),

来源：https://stackoverflow.com/questions/58263620/how-to-use-key-press-event-on-textfromfield-in-flutter