때때로 어플리케이션에서 텍스트의 일부분에 배경색 또는 테두리를 추가하고 싶은 경우가 있습니다. Flutter에서 RichText를 사용하여 이를 구현할 수 있습니다. RichText는 각 텍스트 조각에 대해 다른 스타일을 적용할 수 있는 위젯입니다.

RichText 위젯

RichText는 다른 스타일을 적용하기 위한 텍스트 스팬(텍스트 단위)들을 가질 수 있는 위젯입니다. 이를 활용하여 특정 텍스트 조각에 스타일을 적용할 수 있습니다.

이제 RichText를 사용하여 텍스트의 일부분에 배경색 또는 테두리를 추가하는 방법을 알아보겠습니다.

특정 부분에 배경색 추가하기

RichText 위젯 내에서 특정 텍스트 조각에 배경색을 추가하는 방법은 간단합니다. 아래는 이를 구현하는 예제 코드입니다.

RichText(
  text: TextSpan(
    children: <TextSpan>[
      TextSpan(
        text: 'This is some text with a background color.',
        style: TextStyle(
          backgroundColor: Colors.yellow, // 배경색 지정
        ),
      ),
    ],
  ),
)

위의 코드에서 TextSpan의 style 속성을 사용하여 backgroundColor를 지정해 배경색을 적용했습니다.

특정 부분에 테두리 추가하기

마찬가지로 RichText를 사용하여 특정 텍스트 조각에 테두리를 추가할 수 있습니다. 아래는 예제 코드입니다.

RichText(
  text: TextSpan(
    children: <TextSpan>[
      TextSpan(
        text: 'This is some text with a border.',
        style: TextStyle(
          decoration: TextDecoration.underline, // 밑줄 추가
          decorationColor: Colors.blue, // 밑줄 색상
          decorationStyle: TextDecorationStyle.solid, // 실선 스타일
        ),
      ),
    ],
  ),
)

위의 코드에서 TextSpan의 style 속성을 사용하여 decoration, decorationColor, decorationStyle 등을 지정해 테두리를 추가했습니다.

결론

Flutter의 RichText를 사용하면 텍스트의 일부분에 배경색이나 테두리를 쉽게 추가할 수 있습니다. 이를 통해 앱의 텍스트를 더욱 동적으로 스타일링할 수 있습니다.

참고 문서: Flutter - RichText class