[Flutter] 핸드폰 번호 마스크하기

TextField 에서 핸드폰 번호 마스킹을 하기위해 알아보던 중 다른 사람이 만들어 놓은 라이브러리를 확인하였다. (감사합니다.)

• https://pub.dev/packages/multi_masked_formatter
• https://medium.com/@acadia3000_28328/flutter-multiple-masked-text-input-formatter-4aa2c19c5056

근데 지우거나 중간부터 입력할 때, 원하는 결과로 되지 않는 현상이 발생했다.

• 하이픈(-) 위치 제거
• 중간 번호 제거
• 중간 번호 입력
  
  

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    final newText = newValue.text;
    final oldText = oldValue.text;

    if (newText.length == 0 ||
        newText.length < oldText.length ||
        _masks == null ||
        _separator == null) {
      String nt = newText;
      if (newText.isNotEmpty) {
        if (newText.characters.last == _separator) {
          return TextEditingValue(
              text: newText.substring(0, newText.length - 1),
              selection: TextSelection.collapsed(
                offset: newText.length - 1,
              ));
        } else {
          int difPosition = oldText.length - 1;

          if (newText.length < oldText.length) {
            List newList = newText.split('');
            List oldList = oldText.split('');
            for (var i = 0; i < newList.length; i++) {
              if (newList[i] != oldList[i]) {
                difPosition = i;
                break;
              }
            }
            if (oldList[difPosition] == _separator) {
              newList.removeAt(difPosition - 1);
              difPosition--;
              nt = newList.join('');
            }
          }

          return update(nt, _prevMask, position: difPosition);
        }
      }

      return newValue;
    }

    final pasted = (newText.length - oldText.length).abs() > 1;
    final mask = _masks.firstWhere((value) {
      final maskValue = pasted ? value.replaceAll(_separator, '') : value;

      return newText.length <= maskValue.length;
    }, orElse: () => null);

    if (mask == null) return oldValue;

    final needReset =
        (_prevMask != mask || newText.length - oldText.length > 1);
    _prevMask = mask;

    if (needReset)  return update(newText, mask);
    int difPosition;

    if (newText.replaceAll('-', '').length >
        oldText.replaceAll('-', '').length) {
      List newList = newText.split('');
      List oldList = oldText.split('');
      for (var i = 0; i < oldList.length; i++) {
        if (newList[i] != oldList[i]) {
          difPosition = i + 1;
          break;
        }
      }
      if (oldList.isNotEmpty && difPosition != null) {
        if (oldList[difPosition - 1] == _separator) {
          difPosition++;
        }
      }
    }

    return update(newText, mask, position: difPosition);
  }

원본 코드를 조금 수정하여, 핸드폰 번호 수정시 좀 더 자연스러운 변화를 적용하였다.

위의 코드로 변경하게 되면, 위에 발생한 이슈들을 해결할 수 있다.