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

locked·2021년 3월 30일
0

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

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

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

  
  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);
  }

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

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

profile
Flutter 개발자

1개의 댓글

comment-user-thumbnail
2021년 11월 12일

안녕하세요 혹시 update 함수는 무슨 용도로 사용하신 건지 궁금합니다

답글 달기