[Flutter] RichText, TextSpan 설명 및 사용방법

 

이번에는 RichText에 대해서 설명해 드리려고 합니다.

 

어플을 만들던 중 스타일이 혼합된 문자를 표현해야 할 일이 생겨서 이용하게 되었는데요.

 

이때처럼 RichText는 한 줄에 여러 스타일의 문자열을 나타내기 위해 사용할 수 있습니다.

 

예를 들면 아래 사진 같이 한 줄에 빨간 볼드체와 검은색 볼드체를 함께 쓰는 상황이 있을 때 RichText를 이용하여 나타낼 수 있습니다.

 

---

 

먼저 RichText의 구조에 대해서 설명을 드리겠습니다.

 

RichText는 옆의 사진과 같이 트리구조로 이용할 수 있습니다.

 

가장 상위에 RichText, 그 아래 부모 위젯으로 TextSpan이 오고 이 TextSpan부터 텍스트를 이용할 수 있습니다.

 

만약 여러가지 Text를 혼합하여 사용하신다면 TextSpan하위에 children을 두어 여러가지 Text 혼합도 가능합니다.

 

 

---

위의 시뮬레이터에 나타난 "기획하는 개발자" 문장을 보시게 되면, 개발 부분만 약간 큰 볼드체로 적혀있습니다. 

 

RichText를 이용하면 저렇게 나타낼 수 있습니다.  코드는 아래에 첨부하겠습니다.

//----------------1번 예시 RichText -> TextSpan(text 포함한) -> children --------------------
Center(
  child: RichText(
    text: TextSpan(
      text: "기획하는",
      style: TextStyle(
        color: Colors.black,
        fontSize: 45,
      ),
      children: [
        TextSpan(text: "개발",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.black,fontSize: 50,),),
        TextSpan(text: "자",style: TextStyle(color: Colors.black,fontSize: 45,),),
      ]
    ),
  ),
),

이 코드는 1번 예시로 부모 TextSpan이 text를 가지고 있는 경우입니다.

부모위젯도 text를 가지고 있을 수 있고 부모위젯 text에도 스타일이 적용 가능합니다.

//---------------2번 예시 RichText -> TextSpan (아무것도 포함하지 않음)트리용 -> children --------------
RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: "기획하는",
        style: TextStyle(
          color: Colors.black,
          fontSize: 45,
        ),
      ),
      TextSpan(
        text: "개발",
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.black,
          fontSize: 50,
        ),
      ),
      TextSpan(
        text: "자",
        style: TextStyle(
          color: Colors.black,
          fontSize: 45,
        ),
      ),
    ],
  ),
),

2번예시입니다.

 

2번 예시같은 경우에는 부모 TextSpan이 text를 가지지 않고 모든 text를 children에서 표현한 경우입니다.

 

시뮬레이터에서 보셨듯이 부모위젯을 이용하여 나타내나 안 나타내나 화면상에서 차이는 없습니다.

 

하지만, 코드를 읽을 때 가독성 부분에서 조금 더 편리하게 사용하기 위해 유동적으로 선택하여 사용하면 좋을 것 같습니다.

---

여기까지 RichText와 TextSpan에 대한 설명을 해드렸습니다.

 

모르는 위젯이나 글에서 설명이 부족한 부분이 있다면 댓글로 남겨주시면 빠르게 답변 해드리겠습니다!