how to format or separate textformfield parts in flutter

Question

i have a text form field i want to separating the text that comes to text form field
let's say user writes 1111111 and output will be 1,111,111

Form(
          child: Column(
            children: [
              TextFormField(
                keyboardType: TextInputType.emailAddress,
                decoration: InputDecoration(
                  labelText: 'Email Address',
                  hintText: 'you@example.com',
                ),
              )
            ],
          ),
        ),

Does this answer your question? [Dart how to add commas to a string number](https://stackoverflow.com/questions/31931257/dart-how-to-add-commas-to-a-string-number) — Kaustubh Pandey, Nov 06 '20 at 18:00
I see what you're trying to do and am currently trying to make a custom TextInputFormatter. Ashok's answer is the code you'll want but formatting inside the textformfield is a bit tricky. — Will Hlas, Nov 06 '20 at 18:59
i am glad to see your help, ashok's answer worked but only in terminal , it means i can separate them but only when i am printing it , i want to show it in text form field too , if it is possible, please contain that in your answer — thomas.s, Nov 06 '20 at 19:08
Consider focusing the question. Are you asking how to make a string delimited or are you asking how to get updates on a 'TextField'? — Alex.F, Nov 06 '20 at 22:41

score 2 · Answer 1 · answered Nov 06 '20 at 18:04

RegExp reg_ex = new RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))');
Function mathFunc = (Match match) => '${match[1]},';

List<String> sample = [
  '1111111',
];

sample.forEach((String str) {
  String result = str.replaceAllMapped(reg_ex, mathFunc);
  print('$str -> $result');
});

EdYuTo · Accepted Answer · 2021-01-29T13:38:32.337

You should use the controller property from the TextFormField class.

You'll need to make your widget a stateful one (we'll need it's dispose method).
Add the controller to your state:

  final _textController = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    _textController.dispose();
  }

Add a listener to your controller to format your input whenever you type:

  @override
  void initState() {
    super.initState();
    _textController.addListener(() {
      // using Ashok's answer to format the text
      final reg_ex = new RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))');
      final matchFunc = (Match match) => '${match[1]},';
      final text = _textController.text;

      _textController.value = _textController.value.copyWith(
        // we need to remove all the ',' from the values before reformatting
        // if you use other formatting values, remember to remove them here
        text: text.replaceAll(',', '').replaceAllMapped(reg_ex, matchFunc),
        // this will keep the cursor on the right as you type in values
        selection: TextSelection(
          baseOffset: text.length,
          extentOffset: text.length,
        ),
      );
    });
  }

Use the controller within your TextFormField:

  TextFormField(
    controller: _textController,
    keyboardType: TextInputType.emailAddress,
    decoration: InputDecoration(
      labelText: 'Email Address',
      hintText: 'you@example.com',
    ),
  )

how to format or separate textformfield parts in flutter

2 Answers2