Flutter/ 휴대폰 번호 입력시 자동 하이픈/auto hyphen

에러전문·2022년 10월 1일
1

휴대폰 자동 하이픈

프로젝트를 진행하며 핸드폰 번호를 받으면 자동 하이픈 및 예외처리가 해야할일이 생겼다.

일단 자동 하이픈을 구현하기위해서 for문과 if문 을 활용할려고 시도를 하였으나

굉장히 코드가 지저분하고 아무도 못알아볼정도로 별로였으며

제대로 작동이 되는거 같지도 않았다.

그래서 Widget을 따로 만들어서 구현하였다.

일단 TextField 에 inputFormatters에 해당 위젯과 예외처리를 저장하였다.

inputFormatters: [
          FilteringTextInputFormatter.digitsOnly, //숫자만!
          NumberFormatter(), // 자동하이픈
          LengthLimitingTextInputFormatter(13) //13자리만 입력받도록 하이픈 2개+숫자 11개
        ],

자동 하이픈 구현 위젯은 해당 코드 이다.

class NumberFormatter extends TextInputFormatter {
  
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    var text = newValue.text;

    if (newValue.selection.baseOffset == 0) {
      return newValue;
    }

    var buffer = StringBuffer();
    for (int i = 0; i < text.length; i++) {
      buffer.write(text[i]);
      var nonZeroIndex = i + 1;
      if (nonZeroIndex <= 3) {
        if (nonZeroIndex % 3 == 0 && nonZeroIndex != text.length) {
          buffer.write('-'); // Add double spaces.
        }
      } else {
        if (nonZeroIndex % 7 == 0 &&
            nonZeroIndex != text.length &&
            nonZeroIndex > 4) {
          buffer.write('-');
        }
      }
    }

    var string = buffer.toString();
    return newValue.copyWith(
        text: string,
        selection: TextSelection.collapsed(offset: string.length));
  }
}
profile
초보자입니다. 많은지적 감사합니다.

0개의 댓글