Question

当用户输入已经实时格式化的值时，可以在TextField中进行货币格式的某种方式吗？

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

[UPDATE]

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

Answer 1

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

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

的TextField

user.loggedIn

TextInputFormatter

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

这是代码的结果：

Answer 2

使用 flutter_masked_text 包可以轻松设置自定义货币蒙版：

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

kd_jenis

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

dependencies:
  flutter_masked_text: ^0.7.0

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

flutter packages get

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

import 'package:flutter_masked_text/flutter_masked_text.dart';

Answer 3

感谢分享，更新了@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的代码，我还将值解析为两倍，使用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 4

使用intl软件包。完整代码：

{{1}}

Answer 5

要编写更简洁的代码，可以将已屏蔽的值作为一种方法包含在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;
  }
}

Answer 6

我正在经历同样的问题，并使用InputFormatter轻松解决了它 https://gist.github.com/andre-bahia/14fdb0c751822f848a364b3129df1fed

使用的依赖项：

intl：^ 0.15.8

Answer 7

这个库非常适合我：

https://pub.dev/packages/currency_text_input_formatter

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

Flutter TextField与货币格式

7 个答案: