Flutter TextFormField输入金额时如何实现自动带千位分隔符格式化

实现步骤 #

• 第一步：添加intl依赖
  在pubspec.yaml的dependencies节点下添加intl包：

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.19.0 # 可替换为当前最新稳定版本

• 第二步：自定义货币输入格式化器
  创建继承自TextInputFormatter的自定义格式化类，同步处理输入内容格式化与光标位置适配，避免格式化后光标跳位的问题：

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

class CurrencyInputFormatter extends TextInputFormatter {
  final NumberFormat _formatter = NumberFormat('#,###');

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.text.isEmpty) {
      return newValue.copyWith(text: '');
    }
    // 移除所有非数字字符，确保格式化的基准值正确
    String pureNumberText = newValue.text.replaceAll(RegExp(r'[^0-9]'), '');
    num parseValue = num.parse(pureNumberText);
    String formattedText = _formatter.format(parseValue);
    // 保持光标始终在内容末尾
    return newValue.copyWith(
      text: formattedText,
      selection: TextSelection.collapsed(offset: formattedText.length),
    );
  }
}

如果需要支持小数金额，可将格式化规则调整为NumberFormat('#,###.##')，同时修改正则匹配规则保留小数点即可。

• 第三步：修改TextFormField配置
  给TextFormField新增inputFormatters属性，引入上面写好的格式化器：

TextEditingController currencyControler = TextEditingController();
String? amount;

TextFormField(
  controller: currencyControler,
  keyboardType: TextInputType.number,
  // 新增输入格式化配置
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
    CurrencyInputFormatter(),
  ],
  validator: (value) {
    if (value!.isEmpty) {
      return '请输入金额';
    }
    return null;
  },
  onSaved: (String? value) {
    // 保存时移除逗号转成纯数字格式，方便后续存储计算
    amount = value?.replaceAll(',', '');
  },
  decoration: InputDecoration(
    icon: const Icon(Icons.money_outlined),
    labelText: "金额",
    hintText: '请输入金额',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8.0),
    ),
  ),
)

注意事项 #

如果需要限制金额上限、小数位数等规则，可以在自定义格式化器中增加对应的判断逻辑即可。

内容的提问来源于stack exchange，提问作者Kevnlan