Flutter 앱을 개발하면서 RichText에서 텍스트에 그림자를 추가하고 싶은 경우가 있습니다. 그런데 Flutter에서 기본적으로 제공하는 Text 위젯에는 그림자 속성이 없습니다. 하지만 RichText 위젯을 사용하여 각각의 TextSpan에 그림자를 추가할 수 있습니다.

RichText란?

RichText는 여러 개의 서로 다른 스타일 (텍스트, 색상, 폰트, 크기 등)을 가진 텍스트를 단일 위젯 안에 표시할 수 있게 해주는 Flutter 위젯입니다.

텍스트 그림자 추가 방법

아래는 RichText에서 텍스트에 그림자를 추가하는 간단한 예제 코드입니다.

RichText(
  text: TextSpan(
    text: 'Hello, ',
    style: TextStyle(
      color: Colors.black,
      shadows: [
        Shadow(
          color: Colors.grey,
          blurRadius: 2,
          offset: Offset(2, 2),
        ),
      ],
    ),
    children: <TextSpan>[
      TextSpan(
        text: 'World!',
        style: TextStyle(
          color: Colors.black,
        ),
      ),
    ],
  ),
)

위의 예제에서 RichText 위젯을 사용하여 TextSpan에 각각의 텍스트와 스타일을 지정하고, shadows 속성을 사용하여 그림자를 추가했습니다.

그림자는 Shadow 클래스를 사용해 정의되며, color 속성은 그림자의 색상을, blurRadius 속성은 흐림 반경을, offset 속성은 그림자의 위치를 지정합니다.

마무리

Flutter에서 RichText를 사용하여 텍스트에 그림자를 추가하는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 텍스트 스타일링을 할 수 있으며, 사용자 인터페이스를 더욱 풍부하게 꾸밀 수 있습니다.

참고문헌:

• Flutter - RichText class
• Flutter - TextSpan class