具有货币格式的Flutter TextField

Question

有什么方法可以在TextField中进行货币格式设置，以便当用户输入要实时格式化的值时？

就像上图中一样，当用户输入格式时，格式会更新已格式化的值。

[更新]

我刚刚发现这个使它像魅力一样起作用的库：https : //pub.dartlang.org/packages/flutter_masked_text

Answer 1

使用intl包。完整代码：

import 'package:intl/intl.dart';

class _HomePageState extends State<HomePage> {
  final _controller = TextEditingController();
  static const _locale = 'en';
  String _formatNumber(String s) => NumberFormat.decimalPattern(_locale).format(int.parse(s));
  String get _currency => NumberFormat.compactSimpleCurrency(locale: _locale).currencySymbol;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TextField(
        controller: _controller,
        decoration: InputDecoration(prefixText: _currency),
        keyboardType: TextInputType.number,
        onChanged: (string) {
          string = '${_formatNumber(string.replaceAll(',', ''))}';
          _controller.value = TextEditingValue(
            text: string,
            selection: TextSelection.collapsed(offset: string.length),
          );
        },
      ),
    );
  }
}

Answer 2

设置自定义货币蒙版的一个简单解决方案是使用flutter_masked_text包：

1-首先，您需要将此包添加到包的pubspec.yaml文件中：

dependencies:
  flutter_masked_text: ^0.7.0

2-之后，使用命令行（如下所示）安装软件包，或使用图形界面，如果使用的是IntelliJ IDEA，只需单击“ Packages get”按钮。

flutter packages get

3-现在在您的Dart代码中，将其导入...

import 'package:flutter_masked_text/flutter_masked_text.dart';

4-最后，将您的TextField控制器代码从“ TextEditingController”更改为“ MoneyMaskedTextController”：

  //final lowPrice = TextEditingController(); //before
  final lowPrice = MoneyMaskedTextController(decimalSeparator: '.', thousandSeparator: ','); //after

Answer 3

[此代码不适用于所有情况]

我只是以这种方式工作，可以共享以防万一有人需要：

文本域

new TextFormField(
          //validator: ,
          controller: controllerValor,
          inputFormatters: [
            WhitelistingTextInputFormatter.digitsOnly,
            // Fit the validating format.
            //fazer o formater para dinheiro
            new CurrencyInputFormatter()
          ],
          keyboardType: TextInputType.number, ...

TextInputFormatter

class CurrencyInputFormatter extends TextInputFormatter {

  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {

if(newValue.selection.baseOffset == 0){
  print(true);
  return newValue;
}

double value = double.parse(newValue.text);

final formatter = new NumberFormat("###,###.###", "pt-br");

String newText = formatter.format(value/100);

return newValue.copyWith(
    text: newText,
    selection: new TextSelection.collapsed(offset: newText.length));
  }
}

这是代码的结果：

Answer 4

这个库非常适合我：

https://pub.dev/packages/currency_text_input_formatter

...
inputFormatters: [
  CurrencyTextInputFormatter(
    decimalDigits: 0,
    locale: 'ru',
  )
]
...

Answer 5

更新了@Andr\xc3\xa9Luis 的代码以限制位数（maxDigits），感谢分享。

\n\n

import \'package:flutter/services.dart\';\nimport \'package:intl/intl.dart\';\n\nclass CurrencyPtBrInputFormatter extends TextInputFormatter {\n  CurrencyPtBrInputFormatter({this.maxDigits});\n  final int maxDigits;\n\n  TextEditingValue formatEditUpdate(\n      TextEditingValue oldValue, TextEditingValue newValue) {\n\n    if (newValue.selection.baseOffset == 0) {\n      return newValue;\n    }\n\n    if (maxDigits != null && newValue.selection.baseOffset > maxDigits) {\n      return oldValue;\n    }\n\n    double value = double.parse(newValue.text);\n    final formatter = new NumberFormat("#,##0.00", "pt_BR");\n    String newText = "R\\$ " + formatter.format(value / 100);\n    return newValue.copyWith(\n        text: newText,\n        selection: new TextSelection.collapsed(offset: newText.length));\n  }\n}\n

\n\n

对 TextFormField 使用以下代码，我还将该值解析为双倍，并使用 RegExp 删除非数字字符。

\n\n

TextFormField(\n  maxLines: 1,\n  keyboardType: TextInputType.number,\n  inputFormatters: [\n    WhitelistingTextInputFormatter.digitsOnly,\n    CurrencyPtBrInputFormatter(maxDigits: 8),\n  ],\n  onSaved: (value) {\n    String _onlyDigits = value.replaceAll(RegExp(\'[^0-9]\'), "");\n    double _doubleValue = double.parse(_onlyDigits) / 100;\n    return _valor = _doubleValue;\n  },\n);\n

\n