[Flutter]３桁ごとに「,」を追加するTextInputFormatter

はじめに

TextFieldやTextFormFieldで入力された数字をコンマを付けて表示したいことがあると思います
例）1200→1,200

そんな時に、使えるTextInputFormatterを作りました。コピペで使えます。このクラスをInputFormattersプロパティに入れて使ってください。

コード

import 'package:flutter/services.dart';

class CommaFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    final text = newValue.text;
    if (text.isEmpty) {
      return newValue;
    }
    final value = int.tryParse(text.replaceAll(',', ''));
    if (value == null) {
      return oldValue;
    }
    // 3桁ごとにカンマを挿入　例：1234567 → 1,234,567
    newValue = TextEditingValue(
      text: value.toString().replaceAllMapped(
        RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'),
        (Match m) {
          return '${m[1]},';
        },
      ),
    );
    // カーソルを末尾に移動
    newValue = newValue.copyWith(
      selection: TextSelection.collapsed(
        offset: newValue.text.length,
      ),
    );
    return newValue;
  }
}