[Widget] Text 부분적으로 글자 색상 변경하는 방법

아마 개발을 진행하면서 제일 많이 사용하는 위젯이 Text라고 생각한다.

이 Text를 부분적으로 글자 색상을 변경하고 싶다면?

아래는 기본 Text 사용 예시이다.

Text Widget

Flutter에서 기본으로 제공해주는 Material에는 RichText라는 위젯이 존재한다. 이 위젯을 사용하면 부분적으로 색상 변경을 쉽게 할 수 있다.

 

RichText(
    text: TextSpan(
        children: [
          TextSpan(text: 'Hello,', style: TextStyle(fontSize: 40, color: Colors.black)),
          TextSpan(text: ' World', style: TextStyle(fontSize: 40, color: Colors.red))
        ])),

 

이 코드는 RichText를 사용하는 가장 간단한 예시이다. TextSpan을 children으로 감싸주고 그 이후에는 위와 같이 그려주면 된다.

 

 

Text, RichText 사용 비교

위는 Text를 사용한 예시, 아래는 RichText를 사용하여 "Hello" 부분 색상을 빨간색으로 변경해서 나타내준 예시이다.

 

끝!