Why Android not able to show correct formatted Text in TextField while iOS does?

Question

Minimal code:

import 'package:intl/intl.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyPage()));

class MyPage extends StatelessWidget {
  final _controller = TextEditingController(text: "");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(44.0),
        child: Center(
          child: TextField(
            controller: _controller,
            keyboardType: TextInputType.number,
            onChanged: (string) {
              string = string.replaceAll(RegExp(","), "");
              string = _formattedString(string);
              _controller.text = string;
              _controller.selection = TextSelection.fromPosition(TextPosition(offset: string.length));
            },
          ),
        ),
      ),
    );
  }

   _formattedString(string) {
    final format = NumberFormat.decimalPattern();
    return format.format(int.parse(string));
  }
}

---

Run this code, in both Android and iOS, enter number like 123456789, in Android it prints some weird sequence however it does work in iOS. Can anybody tell me what's wrong in the code?

Android output

---

iOS output

Answer 1

Add this to your package's pubspec.yaml file:

dependencies: flutter_masked_text: ^0.8.0

1. Create your mask controller
2. Set controller to your text field:

class MyPage extends StatelessWidget { var _controller = new MaskedTextController(mask: '000,000,000,00');

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
            padding: const EdgeInsets.all(44.0),
            child: Center(
                child: TextField(controller: _controller)
            )
        )
    );
  }
}

Answer 2

Or if you don't want another dependency in your project, give this a try:

import 'package:flutter/services.dart';
import 'package:intl/intl.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyPage()));

class NumericTextFormatter extends TextInputFormatter {
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.text.length == 0) {
      return newValue.copyWith(text: '');
    } else if (newValue.text.compareTo(oldValue.text) != 0) {
      int selectionIndexFromTheRight = newValue.text.length - newValue.selection.end;
      final f = new NumberFormat("#,###");
      int num = int.parse(newValue.text.replaceAll(f.symbols.GROUP_SEP, ''));
      final newString = f.format(num);
      return new TextEditingValue(
        text: newString,
        selection: TextSelection.collapsed(offset: newString.length - selectionIndexFromTheRight),
      );
    } else {
      return newValue;
    }
  }
}

class MyPage extends StatelessWidget {
  final _controller = TextEditingController(text: "");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(44.0),
        child: Center(
          child: TextField(
            controller: _controller,
            keyboardType: TextInputType.number,
            inputFormatters: [NumericTextFormatter()],
          ),
        ),
      ),
    );
  }
}

Credit goes to: https://stackoverflow.com/a/51739086/5235984