[Flutter] 여러개의 텍스트 한번에 처리하기(RichText, TextSpan)

🎁 RichText Class?

RichText 위젯은 여러 가지 유형을 사용하는 텍스트를 표시한다. 표시할 텍스트는 TextSpan 객체의 트리를 사용하여 설명되며, 각 트리에는 해당 하위 트리에 사용되는 관련 스타일을 따로 적용할 수 있다. 

 

문장 중 특정 단어만 강조하거나 밑줄을 긋고 싶을 때 등등 여러가지 상황에서 사용될 수 있다.

 

[특정 단어 강조]

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: const <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

 

[특정 단어 underline]

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: const <TextSpan>[
      TextSpan(text: 'underline', style: TextStyle(
        decoration: TextDecoration.underline,
      )),
      TextSpan(text: ' world!'),
    ],
  ),
)

RichText(
  text: const TextSpan(
    text: "Don't tax the South ",
    children: <TextSpan>[
      TextSpan(
        text: 'cuz',
        style: TextStyle(
          color: Colors.black,
          decoration: TextDecoration.underline,
          decorationColor: Colors.red,
          decorationStyle: TextDecorationStyle.wavy,
        ),
      ),
      TextSpan(
        text: ' we got it made in the shade',
      ),
    ],
  ),
)