14

In Flutter project, I need to listen to the input text in TextFormField and do certain actions, especially when user put some character (eg. space) in this filed or when he request focus. When this kind of event happen, I need to modify filed's value. I know there is a property called controller but I don't know how to use it in this case.

Thank you in advance.

2 Answers 2

39

You can specify a controller and focus node, then add listeners to them to monitor for changes.

Ex:

Define controllers and focus nodes

TextEditingController _controller = new TextEditingController();

FocusNode _textFocus = new FocusNode();

Define listener function

void onChange(){
  String text = _controller.text;
  bool hasFocus = _textFocus.hasFocus;
  //do your text transforming
  _controller.text = newText;
  _controller.selection = new TextSelection(
                                baseOffset: newText.length, 
                                extentOffset: newText.length
                          );
}

Add listner to controller and focusnode at initState

// you can have different listner functions if you wish
_controller.addListener(onChange); 
_textFocus.addListener(onChange);

Then you can use it as

new TextFormField(
  controller: _controller,
  focusNode: _textFocus,
)

Hope that helps!

14
  • 1
    It works. But every time when I change text using _controller.text = 'some text', the cursor goes at the beginning of input field. Why? How can I move it to the end?
    – mynameis
    Feb 20, 2018 at 16:57
  • Ok, in this case, the cursor can be moved to the end by selection like this: _controller.selection = new TextSelection(baseOffset: _controller.text.lenght, extentOffset: _controller.text.lengh);
    – mynameis
    Feb 21, 2018 at 7:36
  • Ah! forgot, changed my answer to do the same. Feb 21, 2018 at 8:00
  • 1
    If you want to listen to them all, then yes, you need to create. Or if you want the data when form is submitted, you can wrap Form widget. Jul 19, 2018 at 9:08
  • 1
    Seems the TextFormField has onChanged callback. Try if that works. Nov 24, 2020 at 10:03
3

If you are just trying to transform the input to other form in TextFormField, you better use "TextInputFormatter". Using a listener with TextController cause a lot of troubles. Take a look at my sample code see if that helps you. btw, The last line of code is just trying to move the cursor to the end of text.

TextFormField(inputFormatters: [QuantityInputFormatter()])

class QuantityInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    final intStr = (int.tryParse(newValue.text) ?? 0).toString();
    return TextEditingValue(
            text: intStr, selection: TextSelection.collapsed(offset: intStr.length),);
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.