How to use onKeyUp event in TextField in flutter

Question

I am using flutter to make a simple application. In the below code, when TextBox changed event is fired then I call the method named updateTitle().

But I have to call the same method updateTitle(), when key is up, as we use in javascript and other languages too.

              TextField(
                controller: titleController,
                style: textStyle,
                onChanged: (value) => updateTitle(),
                decoration: InputDecoration(
                    labelText: "Title",
                    labelStyle: textStyle,
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5.0),
                    )),
              ),

Answer 1

For your use case, the onChangedworks just like onkyeup would work. Everytime that the user tap a new character in the textfield, it is fired.

In order to enable/disable a button you should listen to this event, do the test to see if the field isn't empty, modify a variable that will handle the button state, and call setState().

This is just a sample code. Not tested, but should work as is.

class _SoAnswerState extends State<SoAnswer> {

    bool _buttonActive = false;

    @override
    Widget build(BuildContext context) {

    ...

        TextField(
            controller: titleController,
            style: textStyle,
            onChanged: (value) => updateButtonState(value), // onChanged return the value of the field
            decoration: InputDecoration(
                labelText: "Title",
                labelStyle: textStyle,
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5.0),
                )
            ),
        ),

    ...
    }

    void updateButtonState(String text){
        // if text field has a value and button is inactive
        if(text != null && text.length > 0 && !_buttonActive){
            setState(() {
                _buttonActive = true;
            }
        }else if((text == null || text.length == 0) && _buttonActive){
            setState(() {
                _buttonActive = false;
            }
        }
    }

Edit: add more information about the events

In JavaScript, the onkeyup event handler fires when the user releases a key that was previously pressed. When the user press and release a key inside a text field, the text field value changes. The onChanged listener in Flutter fires when the text field value changes. When working with a typing interface, where the user uses a tradicional keyboard, it is not a good idea to listen to all the changes of a text field, because the user can press and hold a key, leading the application to repeat the onchanged event too many times, once for every character repetition. That's not the case with a mobile interface, where the user (usually) can't press and hold a key.