241223 TIL

이모지🎄🧑‍🎄🎊🧑‍🧑‍🧒‍🧒 입력 시 글자 길이 2글자 이상으로 잡히는 버그

현상

이모지 입력 시 텍스트필드에서 글자길이가 2자 이상으로 잡힘

이유

• dart에서는 문자열을 utf-16으로 인코딩함
• 원래는 한 글자가 한 코드유닛(16비트) 단위로 인코딩 되어야하는데
• 이모지의 경우 2개~여러개의 코드유닛단위로 저장됨
  왜냐면 utf-16은 2^16=65,536개의 글자를 구분할 수 있는데 이모지는 그 범위에 들어가지 않아서 32비트,64비트에 저장되는 등 원래 규칙(16비트 단위)을 벗어남
• 따라서, 단순히 .length 이용 시 코드유닛단위를 반환 (이모지는 한글자인데 2이상의 숫자가 반환될 수 있음)

해결방안

Characters(text).length;

위 코드를 이용해 코드유닛을 반환하는것이 아니라 실제 표시되는 문자 개수를 반환해야함

또한 텍스트필드에서 글자수 제한을 두고 싶으면 단순히 maxLength 속성을 사용하는것이 아니라 아래의 inputFormatter를 사용해야함

final maxLength = 100;
  maxLengthWithEmojiFormatter(int maxLength) => [
        TextInputFormatter.withFunction((oldValue, newValue) {
          final count = Characters(newValue.text).length;
          if (count > maxLength) {
            return oldValue;
          }
          return newValue;
        }),
      ];