[flutter] RichText에서 텍스트에 그림자 효과 주기

RichText 위젯을 사용하여 Flutter 앱에서 다양한 텍스트 스타일을 쉽게 적용할 수 있습니다. 텍스트에 그림자 효과를 주고 싶을 때도 꽤 간단하게 구현할 수 있습니다.

이 포스트에서는 Flutter의 RichText 위젯을 사용하여 텍스트에 그림자 효과를 적용하는 방법을 알아보겠습니다.

RichText 위젯

RichText 위젯은 여러 스타일과 서식을 가진 텍스트를 표시할 수 있는 Flutter의 강력한 위젯입니다. RichText를 사용하면 하나의 텍스트 문자열에 대해 여러 가지 서식을 지정할 수 있습니다.

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

위의 예제에서는 RichText를 사용하여 “Hello World!”라는 텍스트를 보여주고 있습니다. 그림자 효과를 적용하려면 TextStyleshadows 속성을 사용하여 그림자를 정의하면 됩니다.

그림자 효과 적용하기

RichText의 TextStyle에서 shadows 속성은 리스트 형태의 Shadow를 받습니다. Shadow 객체를 생성할 때 색상과 블러(흐림) 효과를 지정할 수 있습니다.

TextStyle(
  color: Colors.black,
  shadows: [Shadow(color: Colors.grey, blurRadius: 2)],
)

위의 코드에서는 텍스트의 색상을 검정으로 지정하고, 이에 대한 그림자 효과를 회색으로 지정하고, 블러 효과의 반경을 2로 설정하였습니다.

RichText를 사용하여 텍스트에 그림자 효과를 적용하는 방법을 알아보았습니다. 이를 응용하여 다양한 텍스트 스타일링을 구현해보세요!

참고: Flutter RichText Class