Flutter TextField with currency format

enter image description here


Use intl package. Full code:

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),
          );
        },
      ),
    );
  }
}

This library works perfect for me:

https://pub.dev/packages/currency_text_input_formatter

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

An easy solution to set a custom money mask, is to use the flutter_masked_text package:

1 - First of all, you need add this packege to your package's pubspec.yaml file:

dependencies:
  flutter_masked_text: ^0.7.0

2 - After that, install the package using the command line (as below), or use a graphic interface for it, if you are using the IntelliJ IDEA just click in the button "Packages get".

flutter packages get

3 - Now in your Dart code, import it...

import 'package:flutter_masked_text/flutter_masked_text.dart';

4 - Lastly, change your TextField controller code from "TextEditingController" to "MoneyMaskedTextController":

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

[THIS CODE DOESN'T WORKS FOR ALL CASES]

I just got it working this way, sharing in case someone needs too:

TextField

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));
    }
}

This is the result of the code:

enter image description here

Tags:

Dart

Flutter