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.
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 ^_^
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 :)
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With