Flutter[플러터] / Text.rich 사용해서 텍스트 개별 사이즈 조절 하기 (Text Size 조절, TextSpan)

한 번쯤은 이런 의문을 가져본 적이 있을 것이다.

Text() 안에 넣은 글자 크기를 글자마다 다르게 할 순 없는 건가? 이 생각 말이다.

예를 들자면 (가나다라 )이런식으로 한 글이지만 폰트 사이즈도 다르게 하고 싶고 굵기도 다르게 하고 싶을 것이다.

놀랍게도 그 기능은 안될 줄 알았던 Text 안에 있다.

 

Text.rich()

 

.을 사용해서 Text의 명명된 생성자를 불러오면 그 기능을 사용할 수 있는데 한번 알아보자.

일단 우선 Text.rich를 사용해야 한다. 그리고 그 안에 값으로는 TextSpan() 을 사용한다.

 

백문이 불여일견이라고 한번 어떻게 사용하는지 봐보자.

Text.rich(
  TextSpan(
    children: [
      TextSpan(
        text: '디아블로',
        style: TextStyle(color: Colors.white),
      ),
      TextSpan(
        text: '4',
        style: TextStyle(color: Colors.red),
      ),
    ],
  ),
)

 

일단 가장 먼저 Text.rich 그 아래에 이제 TextSpan() 을 작성해야 한다. 이 TextSpan 에는 text 값과 children 값이 존재하는데 그냥 text 값 쓸 거면 이거 쓸 이유가 없으니 당연히 children 값을 사용한다. 그렇게 만들어진 children 안에 TextSpan 을 여러 개 넣을 수 있다.

 

TextSpan은 그냥 우리가 평소에 쓰던 Text 처럼 사용하면 된다. '' 글자 넣고 데이터 넣고 style 칸에는 TextStyle 사용해서 주고 싶은 거 주면 되고 색 여러 개 바꾸고 싶으면 여러 개 사용하면 된다. 

저 간단한 코드를 실행시키면 이렇게 된다.

 

오늘은 간단하게 Text.rich() 를 사용하여 텍스트를 개별로 꾸미는 법에 대해 알아봤다. 도움이 되었길 바라며 포스팅 마치겠다.

반응형