flutteruser-interfacedartcredit-card

flutter : expiry date text field


how we can implement text field formatter for expire credit card date like this MM/YY

enter image description here


Solution

  • 17 days later, but I could implement this:

    class CardExpirationFormatter extends TextInputFormatter {
      @override
      TextEditingValue formatEditUpdate(
          TextEditingValue oldValue, TextEditingValue newValue) {
        final newValueString = newValue.text;
        String valueToReturn = '';
    
        for (int i = 0; i < newValueString.length; i++) {
          if (newValueString[i] != '/') valueToReturn += newValueString[i];
          var nonZeroIndex = i + 1;
          final contains = valueToReturn.contains(RegExp(r'\/'));
          if (nonZeroIndex % 2 == 0 &&
              nonZeroIndex != newValueString.length &&
              !(contains)) {
            valueToReturn += '/';
          }
        }
        return newValue.copyWith(
          text: valueToReturn,
          selection: TextSelection.fromPosition(
            TextPosition(offset: valueToReturn.length),
          ),
        );
      }
    }