Flutter TextField value always uppercase & debounce

Harun picture Harun · Mar 12, 2018 · Viewed 43k times · Source

I am new in Flutter. I am looking for TextField value to always capitalize but I did not find any resource on that.

Another issue is the TextField onChanged event debounce implementation. When I type on TextField it immediately fires onChanged event which is not suitable for my goal. The onChange event will fire after 500ms on every text changed.

 new TextField(
         controller: _controller,
         decoration: new InputDecoration(
              hintText: 'Search here',
         ),
         onChanged: (str) {
            //need to implement debounce
         }
)

Answer

Günter Zöchbauer picture Günter Zöchbauer · Mar 12, 2018

Works on Android, iOS, Web, macOS, Windows and Linux

You can implement a custom TextInputFormatter

class UpperCaseTextFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    return TextEditingValue(
      text: newValue.text?.toUpperCase(),
      selection: newValue.selection,
    );
  }
}

Usage:

TextField(
  inputFormatters: [
    UpperCaseTextFormatter(),
  ]
)

Full example