[flutter] RichText에서 텍스트의 굵기 조절하기

Flutter 앱을 개발하다 보면 텍스트 스타일을 다양하게 조절해야 하는 경우가 있습니다. RichText 위젯을 사용하면 하나의 텍스트 문자열에 서로 다른 스타일을 적용할 수 있어 편리합니다. 이번 포스트에서는 RichText를 사용하여 굵은 텍스트를 표시하는 방법에 대해 알아보겠습니다.

RichText란 무엇인가?

RichText는 다양한 스타일을 가진 다중 텍스트를 표시하기 위한 Flutter 위젯입니다. 이를 사용하면 하나의 텍스트 문자열에 여러 가지 텍스트 스타일을 적용할 수 있습니다.

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

위의 예제는 ‘Hello’와 ‘world!’ 사이의 ‘bold’ 텍스트를 굵게 표시하는 RichText 위젯을 보여줍니다.

텍스트의 굵기 조절하기

RichText를 사용하여 텍스트를 굵게 표시하기 위해서는 TextSpanstyle 속성에 FontWeight.bold를 지정해주면 됩니다.

RichText(
  text: TextSpan(
    text: '이 텍스트는 ',
    style: TextStyle(
      color: Colors.black,
      fontSize: 16.0,
    ),
    children: <TextSpan>[
      TextSpan(
        text: '굵게',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.red,
        ),
      ),
      TextSpan(
        text: ' 표시됩니다.',
        style: TextStyle(
          color: Colors.black,
        ),
      ),
    ],
  ),
)

위의 예제는 “이 텍스트는 굵게 표시됩니다.” 라는 텍스트를 보여줍니다.

RichText를 사용하여 텍스트의 굵기를 조절하는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 형태의 텍스트 스타일을 적용하여 보기 좋은 UI를 만들어보세요!

참고 자료