Flutter에서 RichText 위젯은 다양한 텍스트 스타일을 제어할 수 있는 강력한 도구입니다. 특정 부분에 동적 효과를 추가하려면 RichText를 활용하여 텍스트 스타일을 개별적으로 지정할 수 있습니다.

RichText 위젯 이해하기

RichText 위젯을 사용하기 위해서는 텍스트 스팬(TextSpan)과 스타일(TextStyle)을 조합하여 RichText 위젯에 적용해야 합니다. TextSpan은 부모와 자식 요소로 구성된 텍스트를 나타내며, TextStyle은 텍스트의 스타일을 정의합니다.

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

위의 예시에서 “Hello”는 기본 텍스트 스타일이 적용되고, “world”는 볼드체로 꾸며지는 것을 확인할 수 있습니다.

특정 부분에 동적 효과 추가하기

특정 부분에 동적 효과를 추가하려면 RichText를 사용하여 TextSpan에 다양한 스타일을 적용하면 됩니다. 예를 들어, 특정 조건에 따라 텍스트의 색상이나 스타일을 변경하려면 조건에 따라 TextSpan의 style을 동적으로 업데이트할 수 있습니다.

bool isImportant = true;

TextSpan getTextSpan() {
  if (isImportant) {
    return TextSpan(
      text: 'important',
      style: TextStyle(
        color: Colors.red,
        fontWeight: FontWeight.bold,
      ),
    );
  } else {
    return TextSpan(
      text: 'normal',
      style: TextStyle(
        color: Colors.black,
      ),
    );
  }
}

RichText(
  text: getTextSpan(),
)

getTextSpan() 함수는 isImportant 값에 따라 다른 TextSpan을 반환하므로, 상황에 맞게 동적으로 텍스트의 모양이 변경됩니다.

결론

Flutter의 RichText 위젯을 사용하여 텍스트의 특정 부분에 동적 효과를 추가하는 방법을 살펴보았습니다. TextSpan과 TextStyle을 조합하여 RichText 위젯에 다양한 스타일을 적용함으로써 원하는 동적 효과를 간단하게 구현할 수 있습니다. 이를 통해 앱의 사용자 경험을 더욱 향상시킬 수 있습니다.

참고: Flutter - RichText Class