[Tips] 숫자 텍스트의 width 값이 다른경우 맞춰주기

앱을 개발하다 보면 숫자를 다양하게 표시해야 하는 경우가 있습니다.

숫자를 표시하는 경우 숫자가 변경되면서 위치가 움직이거나 깜빡이는 느낌을 받을때가 있습니다. 아래 동영상과 같이 "11"과 "99"의 width 값이 서로 달라 보기 좋지 않은 경우도 있죠.

이 문제를 해결하는 방법을 알려드리겠습니다.

우선 간단하게 설명드리면 아래 코드와 같이 fontFeatures에 tabularFigures를 설정하는 것입니다.

Text(
    '1. $formattedTime (tabularFigures)',
    style: const TextStyle(
      fontSize: 30,
      fontFamily: 'NotoSans',
      fontFeatures: [FontFeature.tabularFigures()], // <<- 여기
    ),
  ),

우선 Text를 이용해 숫자를 표시할 때 폭이 가변(proportionalFigures)인 상태로 표시가 됩니다. (최신 버전인 3.19.3에서는 기본으로 tabularFigures 속성이 사용되는것처럼 보이네요.)
텍스트가 표시되는 만큼만 영역이 잡힌다는 이야기지요. 그렇기 때문에 숫자 1과 숫자 9는 나타내는 width 값이 다르게 보입니다.
반면에 tabularFigures 속성을 사용하게 된다면 모든 숫자를 동일한 폭으로 표시하게 됩니다.

위 개념을 이해한 상태로 아래의 동영상 내용을 설명드리겠습니다.
1번과 2번은 tabularFigures의 설정 유무에 따라 시간을 나타내는 영역이 왔다리갔다리 하는것을 보실수 있습니다. 숫자 1이 표시되는 경우 그 차이점을 더 확연히 볼 수 있습니다.
3, 4, 5번의 경우는 tabularFigures 속성을 enable/disable 하는 경우를 확실히 보기 위해 비교군과 대조군으로 구분해서 테스트를 해보았습니다. 체크박스 체크 여부에 따라 '111' 의 width 값이 달라지는것을 보실수 있습니다.

이처럼 숫자를 동시에 여러 줄에서 표시하는 UI나 숫자가 변경되는 UI를 개발하는 경우에는 이러한 속성을 잘 고려해서 구현해야 하겠습니다. 

그럼 이만