How to format the numbers as we type and check validation in TextField in flutter?

Question

I have a text field and currently I am enforcing validation using RegExp as follows:

TextField(
                    keyboardType: TextInputType.number,                     
                    inputFormatters: [
                      FilteringTextInputFormatter.allow(
                        RegExp(r'(^\d*\.?\d*)'),
                      ),                          
                      LengthLimitingTextInputFormatter(12),
                    ],
                    onChanged: (value) {
                      setState(() {
                        if (value.isNotEmpty) {
                          initialValue = double.parse(value);
                        } else if (value.isEmpty) {
                          initialValue = 0;
                        }
                      });
                    },
                    decoration: InputDecoration(                          
                      border: OutlineInputBorder(),
                    ),
                  ),

Now I want the number to be formatted with commas (Eg: 1,23,45,678.901) as the user types the number in the TextField. How can I implement this?

I went through this TextInputFormatter-class and EditableText on the flutter docs but did not understand much. So is there a simpler way or should we using EditableText?

Also, in the RegExp I want it to accept commas between numbers but obviously before the decimal as validation.

Answer 1

The easiest way is to look at existing packages. mask_text_input_formatter does exactly what you are describing.