[flutter] RichText에서 텍스트 속성 조절하기(가운데 줄, 선 등)

Flutter 앱을 개발하다보면 RichText 위젯을 사용하여 텍스트의 특정 부분에 서로 다른 스타일을 적용해야 하는 경우가 있습니다. RichText는 한 번에 여러 가지 스타일을 적용할 수 있어, 예를 들어 텍스트 중간에 가운데 줄을 추가하거나, 밑줄을 긋는 등의 작업을 할 수 있습니다.

RichText 위젯

RichText 위젯을 사용하여 단일 텍스트 문자열에 서로 다른 스타일을 적용할 수 있습니다. 이를 통해 텍스트의 일부분에만 특정 스타일링을 적용할 수 있습니다.

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

위 예제에서는 “world”라는 단어에만 볼드체 스타일을 적용했습니다.

텍스트 속성 조절하기

RichText를 사용하여 텍스트의 특정 부분에 줄, 선, 색상 등 다양한 스타일을 적용할 수 있습니다.

가운데 줄 추가하기

텍스트의 중간에 가운데 줄을 추가하려면 TextDecoration을 사용합니다.

RichText(
  text: TextSpan(
    text: 'Hello',
    style: TextStyle(
      decoration: TextDecoration.lineThrough,
    ),
  ),
)

위 코드에서는 “Hello”라는 텍스트에 가운데 줄을 추가했습니다.

밑줄 추가하기

텍스트에 밑줄을 추가하려면 TextDecoration.underline 속성을 사용합니다.

RichText(
  text: TextSpan(
    text: 'World',
    style: TextStyle(
      decoration: TextDecoration.underline,
    ),
  ),
)

위 코드에서는 “World”라는 텍스트에 밑줄을 추가했습니다.

텍스트의 다양한 속성을 조절하여 RichText 위젯을 통해 보다 다채로운 텍스트 스타일링을 구현할 수 있습니다.

결론

Flutter의 RichText 위젯을 사용하면 텍스트의 일부분에 서로 다른 스타일을 적용할 수 있어, 가운데 줄, 선 등 다양한 텍스트 속성을 조절할 수 있습니다. 텍스트의 다양한 스타일을 적용하여 다채로운 UI를 구현할 수 있습니다.

더 많은 정보를 원하시면 Flutter 공식 문서를 참고해주세요.