How to call a method once when text editing is completed fully in flutter TextFormField?

Viewed 7458

In Flutter TextFormField, I want to call a method once editing is completed fully,I don't want to call the method while the user is changing the text in text form field(By using listener or by onchanged function), By using OnEditingComplete Function I can achieve this requirement, but the issue is oneditingcomplete is called only when the done button in the keyboard is tapped, when changing the focus after editing from one text field to another textfield onEditingComplete function is not working, So what is the best way to detect once editing is complete fully by the user.

`TextField(
      onEditingComplete: () {//this is called only when done or ok is button is tapped in keyboard
        print('test');
      },
3 Answers

Using the FocusScopeWidget helps me resolve this issue https://api.flutter.dev/flutter/widgets/FocusNode-class.html,

When user press done button in the keyboard onsubmitted function is called and when user change focus focus scope widget is used.

 FocusScope(
    onFocusChange: (value) {
      if (!value) {
       //here checkAndUpdate();
      }
    },
    child: TextFormField(
      key: Key('productSet${DateTime.now().toIso8601String()}'),
      getImmediateSuggestions: true,
      textFieldConfiguration: TextFieldConfiguration(
          onSubmitted: (cal) {
          //here  checkAndUpdate();
          },

Use TextFormField and some sort of trigger like button pressed. Use Global key to keep state of form, when save the form

...
class _Form extends State<Initialize> {
  final _formKey = GlobalKey<FormState>();//create global key with FormState type
  String _variableValue; //to hold data after save the form
  @override
  Widget build(BuildContext context) {
    return form(
      key: _formkey,
      child: Column(
        children: [
              TextFormField(
                onSaved: (value) {
                  _variableValue= value;
                }
              ),
              OutlineButton.icon(
                onPressed: () {
                  _formKey.currentState.save();//should call this method to save value on _variableValue
                },
                icon: Icon(Icons.plus)
              ),
        ],
      ),
    ),
  }
}

good luck

You can use TextFormField instead of TextField:

TextFormField(
    decoration: InputDecoration(labelText: 'First Name'),
    onSaved: (val) => setState(() => _firstName = val),
)

Realistic Forms in Flutter

Related