具有货币格式的 Flutter TextField

Question

有一些方法可以在 TextField 中进行货币格式设置，以便用户输入已经实时格式化的值？

如上图所示，当用户输入格式时，会更新已格式化的值。

[更新]

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

Answer 1

设置自定义货币掩码的简单解决方案是使用 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 2

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

我只是以这种方式工作，分享以防有人需要：

文本字段

TextFormField(  
    //validator: ,  
    controller: controllerValor,  
    inputFormatters: [  
        WhitelistingTextInputFormatter.digitsOnly,
        // Fit the validating format.
        //fazer o formater para dinheiro
        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 = NumberFormat.simpleCurrency(locale: "pt_Br");

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

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

这是代码的结果：

Answer 3

---

使用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 4

这个库非常适合我：

https://pub.dev/packages/currency_text_input_formatter

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

Answer 5

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

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

class CurrencyPtBrInputFormatter extends TextInputFormatter {
  CurrencyPtBrInputFormatter({this.maxDigits});
  final int maxDigits;

  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {

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

    if (maxDigits != null && newValue.selection.baseOffset > maxDigits) {
      return oldValue;
    }

    double value = double.parse(newValue.text);
    final formatter = new NumberFormat("#,##0.00", "pt_BR");
    String newText = "R\$ " + formatter.format(value / 100);
    return newValue.copyWith(
        text: newText,
        selection: new TextSelection.collapsed(offset: newText.length));
  }
}

对 TextFormField 使用下面的代码，我还将值解析为 double，使用 RegExp 删除非数字字符。

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

Answer 6

为了使代码更简洁，可以将隐藏的值作为方法包含在 Formatter 类中。因此，当值发生更改时，您将能够调用它并简化代码。

Widget build(BuildContext context) {
    var maskFormatter = new CurrencyPtBrFormatter(maxDigits: 12);
    return Scaffold(
        body: SingleChildScrollView(
            controller: _scrollController,
            child: Column(
              children: <Widget>[
                TextField(
                  keyboardType: TextInputType.number,
                  inputFormatters: [
                    WhitelistingTextInputFormatter.digitsOnly,
                    maskFormatter,
                  ],
                  controller: _yourController,
                  onChanged: (value) {
                    print(maskFormatter.getUnmaskedDouble()); // here the umasked value
                  },
                  onEditingComplete: () {
                    mudarFocoCampo(context, _estoqueFocus, _codigoFocus);
                  },
                )
              ],
            )));
  }

这里是带有 umasked 方法的完整格式化程序。

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