Reputation: 187
I want to make a textfield
for input of money-amount in Won(Korean currency) like in these picture.
How do you show comma per each 3 digits?
TextFormField(
decoration: InputDecoration(hintText: '예) 10,000 원'),
onChanged: (newValue) {
_price = newValue;
}),
Upvotes: 1
Views: 3384
Reputation: 741
Currency Text Input Formatter package can help who want this goal.
TextField(
inputFormatters: [CurrencyTextInputFormatter()],
keyboardType: TextInputType.number,
)
Upvotes: 0
Reputation: 3136
You can make use of flutter_masked_text package:
After installing package and importing a dependency create a controller:
var controller = MoneyMaskedTextController(
thousandSeparator: ',',
rightSymbol: ' 원',
decimalSeparator: '',
precision: 0);
Use it in your textfield:
TextField(
keyboardType: TextInputType.number,
textAlign: TextAlign.end,
controller: controller,
),
And get a result like you wanted: final result
Upvotes: 1
Reputation: 36
maybe this resource can help u
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 300,
child: TextField(
decoration: InputDecoration(
border: const OutlineInputBorder(),
),
keyboardType: TextInputType.number,
inputFormatters: [ThousandsSeparatorInputFormatter()],
),
),
),
);
}
}
class ThousandsSeparatorInputFormatter extends TextInputFormatter {
static const separator = ','; // Change this to '.' for other locales
@override
TextEditingValue formatEditUpdate(
TextEditingValue oldValue, TextEditingValue newValue) {
// Short-circuit if the new value is empty
if (newValue.text.length == 0) {
return newValue.copyWith(text: '');
}
// Handle "deletion" of separator character
String oldValueText = oldValue.text.replaceAll(separator, '');
String newValueText = newValue.text.replaceAll(separator, '');
if (oldValue.text.endsWith(separator) &&
oldValue.text.length == newValue.text.length + 1) {
newValueText = newValueText.substring(0, newValueText.length - 1);
}
// Only process if the old value and new value are different
if (oldValueText != newValueText) {
int selectionIndex =
newValue.text.length - newValue.selection.extentOffset;
final chars = newValueText.split('');
String newString = '';
for (int i = chars.length - 1; i >= 0; i--) {
if ((chars.length - 1 - i) % 3 == 0 && i != chars.length - 1)
newString = separator + newString;
newString = chars[i] + newString;
}
return TextEditingValue(
text: newString.toString(),
selection: TextSelection.collapsed(
offset: newString.length - selectionIndex,
),
);
}
// If the new value and old value are the same, just return as-is
return newValue;
}
}
Upvotes: 2