[flutter] RichText에서 텍스트 알파값 조절하기

22 Dec 2023

Flutter에서 RichText 위젯을 사용하여 다양한 스타일을 적용할 수 있습니다. RichText는 여러 텍스트 스타일을 하나의 위젯으로 표현할 수 있어 매우 유용합니다. 그 중에서 텍스트의 알파값을 조절하는 방법에 대해 알아보겠습니다.

RichText 위젯 소개

RichText는 다수의 서로 다른 스타일을 가진 TextSpan을 담은 위젯입니다. TextSpan은 각각의 텍스트 스타일과 함께 텍스트를 나타냅니다. 여러 가지 스타일을 한 번에 적용할 수 있는 장점을 가지고 있습니다.

RichText 위젯을 사용하여 텍스트의 알파값을 조절할 때는 TextSpan의 style 속성을 이용하여 Color를 설정합니다. 여기서 Color의 withAlpha 메서드를 사용하여 알파값을 조절할 수 있습니다.

아래는 간단한 예제 코드입니다.

RichText(
  text: TextSpan(
    text: '투명한 텍스트',
    style: TextStyle(
      color: Colors.black.withOpacity(0.5),  // 알파값 0.5인 검은색
    ),
  ),
)

위의 코드에서 Color의 withAlpha 메서드 대신에 opacity를 이용하여 알파값을 조절할 수도 있습니다.

...
style: TextStyle(
  color: Colors.black.withOpacity(0.5),  // 알파값 0.5인 검은색
),
...

이렇게 함으로써 RichText를 사용하여 텍스트의 알파값을 조절할 수 있습니다. 이를 이용하여 다양한 텍스트 스타일을 적용할 수 있습니다.

Flutter의 RichText와 TextSpan을 이용하여 텍스트의 알파값을 조절하는 방법에 대해 알아보았습니다. 이를 통해 텍스트를 더 다채롭게 표현할 수 있습니다.