Flutter Make Textfield input become uppercase

Question

Update(2023/12/05):

I fixed it with setting keyboardType to TextInputType.visiblePassword

Is any update for this question Flutter TextField value always uppercase & debounce ?

I've already tried some of the code to make the input text become uppercase.

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

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

But it works not correct when I type "QWER", it will always become "QQWQWEQWER"

TextFormField(
  controller: _controller,
  inputFormatters: [
    UpperCaseTextFormatter(),
  ],
  decoration: InputDecoration(
    border: OutlineInputBorder(),
  ),
),

Here is the video : https://drive.google.com/file/d/1q3dwuVMPzt_kBP4c2lyiahQ6znkSbM-n/view?usp=sharing

I prefer not to use textCapitalization because the user still can change it to lowercase, if the formatter doesn't work.

Use TextInputFormatter to make textfield input become uppercase

Answer 1

You can use TextEditingController to make user input always UPPERCASE, With the below code the user can't change it to lowercase.

TextEditingController _controller = TextEditingController();

TextFormField(
  controller: _controller,
  onChanged: (String text) {
    _controller.text = text.toUpperCase();
  },
);

This will work Happy Coding!

Answer 2

1. Assign a controller to the TextField.

2. Convert the text value in controller with toUpperCase() in the onChanged function:

   TextEditingController _controller = TextEditingController();
   
   TextFormField(
     controller: _controller,
     onChanged: (String text) {
       _controller.text = text.toUpperCase();
     },
   );