RichText를 이용한 텍스트 관리

이전 포스팅 (https://honken.tistory.com/148)에 발생했던 아래의 height 문제에 대해 처리가 필요했다.

 

현재 날짜와 현재 시간, 초 단위 업데이트

두 텍스트 위젯이 동일하게 Row의 children으로 배치되어 있음에도 불구하고 저렇게 다르게 보이는 이유는 글리프(글자의 모양)의 차이 때문이다. 한글 문자와 숫자/문자를 함께 표시할 때 텍스트의 높이 차이가 발생하는 경우가 종종 발생하며, 한글 글자와 숫자/문자는 글리프의 크기와 모양이 서로 다르기 때문에 같은 폰트 크기와 스타일을 사용하더라도 시각적으로 다를 수 있다.

 

우측에 시간 텍스트에 한글 문자를 1개만 포함시켜도 높이가 동일해지는 것을 확인할 수 있었다.

이 부분을 해결하기 위해 textBaseline 속성을 사용해 봤지만 효과가 없었다.

 

따라서 내가 사용한 방법은 지난 포트폴리오 앱을 만들때 요긴하게 사용했던 RichText이다.

RichText(
    text: TextSpan(
      children: [
        TextSpan(
          text: '$formattedDate  ',
          style: const TextStyle(
            color: Colors.black,
          ),
        ),
        TextSpan(
          text: currentTime,
          style: const TextStyle(
            color: Colors.green,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
      style: const TextStyle(
        fontSize: 12,
      ),
    ),
),

RichText 위젯을 만들고 위의 두 텍스트 위젯을 TextSpan으로 생성한다. 그리고 각기 다른 스타일을 적용하면 하나의 위젯이기 때문에 height가 어긋나게 보이는 문제가 해결된다.