[flutter] RichText에서 텍스트의 특정 부분에 글자 효과 추가하기

22 Dec 2023

flutter

Flutter 앱에서 RichText 위젯을 사용하면 단일 텍스트 위젯에 여러 서식을 적용할 수 있습니다. RichText를 사용하여 특정 텍스트 부분에 글자 효과를 추가하는 방법을 알아보겠습니다.

1. RichText 위젯 생성

먼저, RichText를 위젯 트리에 추가합니다.

RichText(
  // 여러 TextSpan을 포함할 수 있습니다.
  text: TextSpan(
    text: 'This is a ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'sample', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' text.'),
    ],
  ),
)

위의 예제에서 RichText의 text 속성에는 TextSpan이 전달됩니다. TextSpan에는 서식이 적용된 여러 TextSpan을 나열할 수 있습니다.

2. 특정 부분에 글자 효과 추가

특정 부분에 글자 효과를 추가하려면 해당 부분에 TextSpan 위젯을 만들고 해당 위젯에 필요한 스타일을 적용합니다.

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: 'This is a ', style: TextStyle(color: Colors.black)),
      TextSpan(
        text: 'sample',
        style: TextStyle(
          color: Colors.red,  // 특정 부분에 원하는 스타일을 적용합니다.
          fontWeight: FontWeight.bold,
          decoration: TextDecoration.underline,
        ),
      ),
      TextSpan(text: ' text.', style: TextStyle(color: Colors.black)),
    ],
  ),
)

위의 예제에서 ‘sample’이라는 단어에 빨간색, 굵은 글씨체, 밑줄이 적용되었습니다.

결론

RichText를 사용하여 Flutter 앱의 텍스트에 강조 효과나 특별한 서식을 쉽게 적용할 수 있습니다. 내용을 보다 돋보이게 만들거나 사용자의 주의를 집중시키고 싶을 때 RichText를 마음껏 활용해보세요.