flutter format currency in texformfield

Issue

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

Solution

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->

Answered By – Ravindra S. Patil

Answer Checked By – Katrina (FlutterFixes Volunteer)