flutter format currency in texformfield

Question

I have a flutter app which accepts an amount of money as input using a textformfield. I would like to format the input in textformfield so that whatever is being input can be formatted as currency copmlete wiht thousand separator commas. I have tried using the intl package number formatter but all I can do is print it to the command line.

Here is how it looks currently

This is how I would like it to look like

This is the textfield code

  TextEditingController currencyControler = TextEditingController();

  String? amount;

 TextFormField(
              controller: currencyControler,
              keyboardType: TextInputType.number,
              validator: (value) {
                if (value!.isEmpty) {
                  return 'Please enter an amount';
                }
                return null;
              },
              onSaved: (String? value) {
                amount = value;
              },
              decoration: InputDecoration(
                icon: const Icon(Icons.money_outlined),
                labelText: "Amount",
                hintText: 'Enter an amount',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8.0),
                ),
              ),
            )

How can I format the input so that the comma separators appear as any number is being entered

user_13997210 · Answer

Try below code hope its helpful to you.Used intl package here for number formation

Your functions:

  TextEditingController currencyControler = TextEditingController(); 
  String formNum(String s) {
    return NumberFormat.decimalPattern().format(
      int.parse(s),
    );
  }

Your Widget:

   TextFormField(
              controller: currencyControler,
              decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  prefixIcon: Icon(
                    Icons.money,
                  )),
              keyboardType: TextInputType.number,
              onChanged: (string) {
                string = '${formNum(
                  string.replaceAll(',', ''),
                )}';
                currencyControler.value = TextEditingValue(
                  text: string,
                  selection: TextSelection.collapsed(
                    offset: string.length,
                  ),
                );
              },
            ),

Your result screen->

flutter format currency in texformfield

1 Answers