Flutter TextField with currency format
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: