Custom TextInputFormatter for number with dashes

Question

I have here a problem in the TextInputFormatter that I have or created, when you type the numbers there seems to be problem during editing/typing the numbers in the textfield, the problem is it duplicates the last digits or something like that. This happens in the bank3 for the code I've given below.

For more specific detail what I want is for the input to be in this format 123-4567890123 (13 digits with dash in the middle of the 3rd and 4th digit). What's happening is that when I type the 4th digit, for example, I inputted 123 and typed the next digit it become 1234-4 and when type the next digit it becomes 123445-445 and then when I type the next again 1234454456-445445 when the input should be 123-456 by that time.

This is the dart file for my custom textinputformatter:

import 'package:flutter/services.dart';

class AccountNumberInputFormatter extends TextInputFormatter {
  final String bankName;

  AccountNumberInputFormatter(this.bankName);

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    final String newText = newValue.text.replaceAll(RegExp(r'[^0-9]'), '');
    String formattedText = '';

    if (bankName == 'bank1') {
      if (newText.isNotEmpty) {
        formattedText = newText.substring(0, newText.length < 12 ? newText.length : 12);
      }
    } else if (bankName == 'bank2') {
      if (newText.isNotEmpty) {
        final List<String> chunks = [];

        for (int i = 0; i < newText.length; i += 4) {
          final end = i + 4;
          chunks.add(newText.substring(i, end > newText.length ? newText.length : end));
        }

        formattedText = chunks.join('-');
      }
      // Limit to 10 numbers without exceeding the original formatted length
      formattedText = formattedText.replaceAll('-', '');
      formattedText = formattedText.substring(0, formattedText.length < 10 ? formattedText.length : 10);

      // Re-add the dashes to the formatted text
      if (formattedText.length > 4) {
        formattedText = '${formattedText.substring(0, 4)}-${formattedText.substring(4, formattedText.length)}';
      }
      if (formattedText.length > 9) {
        formattedText = '${formattedText.substring(0, 9)}-${formattedText.substring(9, formattedText.length)}';
      }
    } else if (bankName == 'bank3') {
      if (newText.isNotEmpty) {
        formattedText = newText.substring(0, newText.length < 13 ? newText.length : 13);
        if (newText.length > 3) {
          formattedText += '-${newText.substring(3, newText.length < 9 ? newText.length : 9)}';
        }
      }
    } else if (bankName == 'bank4') {
      if (newText.isNotEmpty) {
        formattedText = newText.substring(0, newText.length < 12 ? newText.length : 12);
      }
    }

    return newValue.copyWith(
      text: formattedText,
      selection: TextSelection.collapsed(offset: formattedText.length),
    );
  }
}

Answer 1

It looks like the issue you're facing is related to how you're handling the formatting of the input text using the AccountNumberInputFormatter class. Specifically, in the bank3 case, the logic for adding the dash in the middle of the 3rd and 4th digit seems to be causing the duplication of digits.

To fix this issue, you need to adjust the logic in the bank3 case to properly handle the insertion of the dash and the length of the formatted text. Here's the modified code for the bank3 case:

} else if (bankName == 'bank3') {
  if (newText.isNotEmpty) {
    if (newText.length <= 3) {
      formattedText = newText;
    } else {
      formattedText = '${newText.substring(0, 3)}-${newText.substring(3, newText.length < 13 ? newText.length : 13)}';
    }
  }
}

This code will ensure that the dash is inserted after the 3rd digit, and then the remaining digits are added while limiting the total length to 13 characters.

Make sure to replace the bank3 case in your existing AccountNumberInputFormatter class with this updated code. This should resolve the issue of duplicating digits that you described.