Textfield input formatter no longer work after I use TextEditingController

Question

I am using pattern formatter package in order to use ThousandsFormatter. so when I have value 10000000, it will then automatically be shown as 10.000.000. initially the code is like this, and it works as intended

TextFormField(     
     autofocus: false,
     autocorrect: false,
     maxLines: 1,
     textAlign: TextAlign.end,
     keyboardType: TextInputType.number,
     onChanged: (newNominal) {
         final newValue = newNominal.replaceAll(".", "");
         controller.selectedNominal = int.tryParse(newValue) ?? 0;
     },
     inputFormatters: [
         ThousandsFormatter(formatter: NumberFormat("#,###.##", "in_ID")),
     ],
),

and then I make some buttons like this

as you can see, when I choose $4000 then the Textfield will show 4000, I expect it will show 4.000

I use TextEditingController to populate the value in the Textfield after selecting the value from button, so my TeextField will be like this

final _textEditingController = TextEditingController();

TextFormField(  
     controller: _textEditingController, // I add this line   
     autofocus: false,
     autocorrect: false,
     maxLines: 1,
     textAlign: TextAlign.end,
     keyboardType: TextInputType.number,
     onChanged: (newNominal) {
         final newValue = newNominal.replaceAll(".", "");
         controller.selectedNominal = int.tryParse(newValue) ?? 0;
     },
     inputFormatters: [
         ThousandsFormatter(formatter: NumberFormat("#,###.##", "in_ID")),
     ],
),

when I tap one of those button and the build will called again, so I set the text in the textfield like this

@override
  Widget build(context) {

      final selectedNominal = pageController.selectedNominal.toString();
      final editingValue = TextEditingValue(
        text: selectedNominal,
        selection: TextSelection.fromPosition(
          TextPosition(offset: selectedNominal.length),
        ),
      );

      _textEditingController.value = editingValue;

    return Scaffold(
      appBar: AppBar(
        title: Text("Title here"),
      ),
      body: _buildWidgets(),
    );
  }
}

I don't understand why the ThousandsFormatter no longer work after _textEditingController.value , even when I type the number value using keyboard, the ThousandsFormatter also doesn't work

the nominal controller is like this

class NominalController with ChangeNotifier {


  int _selectedNominal = 0;
  int get selectedNominal => _selectedNominal;

  set selectedNominal(int newValue) {
    _selectedNominal = newValue;
    notifyListeners();
  }

}

Answer 1

I have to give separator first before assigning the string value to the textEditing controller

so I have to 'manually' set from 10000 to be 10.000 before assigning the value to textEditing controller

final selectedNominal = pageController.selectedNominal; // 10000
var currencyFormat = NumberFormat.currency(locale: "in_ID", symbol: "");
final formattedNominal = "${currencyFormat.format(selectedNominal).replaceAll(",00", "")}"; // 10.000

            
final editingValue = TextEditingValue(
     text: formattedNominal, // 10.000
     selection: TextSelection.fromPosition(TextPosition(offset:formattedNominal.length)),
);

_textEditingController.value = editingValue;