CODEWITHSUNDEEP
fluttertextfielddigits
Hee
Hee

Reputation: 187

flutter: how to show currency digits inside textfield

I want to make a textfield for input of money-amount in Won(Korean currency) like in these picture. enter image description here How do you show comma per each 3 digits?

     TextFormField(
                decoration: InputDecoration(hintText: '예) 10,000 원'),
                onChanged: (newValue) {
                  _price = newValue;
                }),

Upvotes: 1

Views: 3384

Answers (3)

Noryn Basaya
Noryn Basaya

Reputation: 741

Currency Text Input Formatter package can help who want this goal.

TextField(
        inputFormatters: [CurrencyTextInputFormatter()],
        keyboardType: TextInputType.number,
      )

Upvotes: 0

Simon Sot
Simon Sot

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

M. Sulthan Al Ihsan
M. Sulthan Al Ihsan

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

Related Questions