backspace text field flutter on Android devices not working - flutter

Question

when I do backspacing on a text, and then type again, the typing does not show up in the text field and the backspacing itself doesn't work good. I don't know if the problem is with the flutter itself or what because many people have the same issue.
TextField(
controller: controller,
maxLength: 9,
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.characters,
onChanged: (text) {
if (7 > pin.length) {
final String newText = _addDashes(text);
controller.text = newText;
controller.selection =
TextSelection.collapsed(offset: newText.length);
}
pin = text;
},
textAlign: TextAlign.left,
// keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
errorText: _errorText,
icon: Icon(
Icons.dialpad,
),
labelText: '8-digit PIN',
contentPadding: EdgeInsets.symmetric(vertical: 10.0),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent, width: 2),
),
focusedErrorBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.red, width: 2),
),
errorBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Color(0xFFF696969), width: 1),
),
),
),

Answer 1

You can change your callback position from OnChnage to custom listener on controller. E.g.
controller.addListener(() {
if (7 > pin.length) {
final String newText = _addDashes(controller.text);
controller.value = _controller.value.copyWith(enter code here
text: newText,
selection: TextSelection.collapsed(offset: newText.length));
}
});
OR You can use same onChange Callback but use custom delayed as follows.
onChanged: (text) {
if (7 > pin.length) {
final String newText = _addDashes(text);
Future.delayed(Duration.zero, () {
controller.text = newText;
controller.selection = TextSelection.collapsed(offset:newText.length);
});
}
pin = text;
}
USING FUTURE DELAYD IN ONCHANGE WORKING FOR ME

Answer 2

this happened to me before and as per research, I found out that using controller and onChanged properties at the same time in a textField is what caused this error. I just can't find the doc where I read it but if I remember correctly, if you use controller, don't use onChanged or 'initialValue' and if some reason you need to use the onChanged or initialValue property, then the controller should be null.

Answer 3

According to the Flutter TextEditingController documentation, you should use a TextInputFormatter instead of editing the value of the TextEditingController using a listener; the issue is similar to that caused by the onChanged callback:
Gboard, for example, will try to restore the composing region of the text if it was modified programmatically, creating an infinite loop of communications between the framework and the input method.
A TextInputFormatter is one way to solve the issue. Others are moving the callback to onSubmitted or to a method that checks whether or not the widget has focus first.

Answer 4

Mask Text Input Formatter
Create Formatter
var maskFormatter = MaskTextInputFormatter(mask: '####-####', filter:
{"#": RegExp(r'[0-9]')}, type: MaskAutoCompletionType.eager);
And add your TextField formatters
TextField(
controller: controller,
maxLength: 9,
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.characters,
// here ->
inputFormatters: [maskFormatter],
textAlign: TextAlign.left,
// keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
errorText: _errorText,
icon: Icon(
Icons.dialpad,
),
labelText: '8-digit PIN',
contentPadding: EdgeInsets.symmetric(vertical: 10.0),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent, width: 2),
),
focusedErrorBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.red, width: 2),
),
errorBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Color(0xFFF696969), width: 1),
),
),
),
Finally get the data
maskFormatter.getMaskedText();
maskFormatter.getUnmaskedText();