Flutter ShaderMask 위젯으로 텍스트와 이미지에 멋진 그라데이션 효과 주기: 사용법과 예제 코드

728x90

Flutter로 앱을 개발하면서 텍스트나 이미지에 스타일을 부여하고 싶을 때가 많습니다. Flutter의 ShaderMask 위젯은 자식 위젯에 그라데이션이나 패턴 마스크 효과를 쉽게 적용할 수 있게 해 주는 강력한 도구입니다. 이 글에서는 ShaderMask 위젯이 무엇인지, 어떻게 사용하는지, 그리고 실전에서 유용하게 쓸 수 있는 몇 가지 예제를 통해 ShaderMask 위젯을 자세히 알아보겠습니다.

1. ShaderMask란?

ShaderMask는 말 그대로 자식 위젯에 "쉐이더 마스크"를 씌워주는 역할을 하는 Flutter 위젯입니다. 이 위젯을 사용하면 텍스트, 아이콘, 이미지 등 다양한 자식 요소에 그라데이션, 패턴, 혹은 특수한 쉐이딩 효과를 쉽게 적용할 수 있습니다. 보통 LinearGradient, RadialGradient, ImageShader 등을 함께 사용하여 멋진 시각 효과를 줄 수 있습니다.

2. ShaderMask 기본 사용법

ShaderMask 위젯을 사용하려면, 먼저 shaderCallback 매개변수를 정의하고, 그 안에 Shader 타입을 리턴하도록 설정합니다. 예를 들어 LinearGradient를 사용하여 텍스트에 그라데이션 효과를 주고 싶다면, 아래와 같은 코드로 시작할 수 있습니다.

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.blue, Colors.purple],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ).createShader(bounds);
  },
  child: Text(
    '멋진 그라데이션 텍스트!',
    style: TextStyle(fontSize: 40, color: Colors.white),
  ),
)

위 코드를 실행하면 텍스트가 파란색에서 보라색으로 부드럽게 변하는 그라데이션 효과를 얻게 됩니다. 여기서 shaderCallback은 Rect 객체를 받아서 Shader를 반환합니다. 이 Shader가 자식 위젯에 적용되어 마치 마스크를 씌운 것처럼 보여줍니다.

3. ShaderMask의 주요 속성

ShaderMask에는 다음과 같은 주요 속성이 있습니다:

shaderCallback: Shader를 생성하는 함수입니다. LinearGradient, RadialGradient, ImageShader 등을 사용하여 다양한 효과를 줄 수 있습니다.
blendMode: BlendMode를 사용하여 Shader가 자식 위젯과 혼합되는 방식을 지정합니다. 기본값은 BlendMode.modulate입니다.
child: ShaderMask에 적용할 자식 위젯입니다.

4. ShaderMask를 활용한 다양한 예제

(1) 텍스트에 RadialGradient 효과 주기

RadialGradient를 사용하면 원형 그라데이션 효과를 줄 수 있습니다. 다음은 텍스트에 중심에서 시작하는 원형 그라데이션을 적용하는 예제입니다.

ShaderMask(
  shaderCallback: (Rect bounds) {
    return RadialGradient(
      colors: [Colors.orange, Colors.red],
      center: Alignment.center,
      radius: 0.5,
    ).createShader(bounds);
  },
  child: Text(
    'Radial Gradient 텍스트!',
    style: TextStyle(fontSize: 40, color: Colors.white),
  ),
)

위 예제에서는 텍스트 중심에서부터 주황색에서 빨간색으로 변하는 원형 그라데이션을 적용합니다.

(2) 이미지에 LinearGradient 효과 적용하기

이미지에 그라데이션 효과를 줄 때도 ShaderMask를 사용할 수 있습니다. 예를 들어, 아래 코드는 이미지의 하단에 그라데이션을 추가하여 더 세련된 느낌을 줍니다.

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.transparent, Colors.black],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
    ).createShader(bounds);
  },
  blendMode: BlendMode.darken,
  child: Image.network('https://example.com/image.jpg'),
)

이 코드에서는 상단은 투명하고 하단은 검정색인 그라데이션을 이미지에 씌워, 블렌드 모드로 어둡게 처리합니다. blendMode를 사용하여 원하는 시각적 효과를 더할 수 있습니다.

5. ShaderMask로 버튼 디자인 강화하기

버튼의 텍스트나 아이콘에도 그라데이션을 적용해 독특한 디자인을 구현할 수 있습니다.

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.teal, Colors.cyan],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ).createShader(bounds);
  },
  child: ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
      primary: Colors.transparent, // 버튼 배경색을 투명으로 설정
      shadowColor: Colors.transparent,
    ),
    child: Text(
      '그라데이션 버튼',
      style: TextStyle(fontSize: 24, color: Colors.white),
    ),
  ),
)

위 코드에서는 버튼에 ShaderMask를 적용하여 텍스트에 그라데이션이 있는 버튼을 구현합니다. 버튼 배경은 투명으로 설정해 그라데이션이 잘 보이도록 합니다.

6. ShaderMask 사용 시 유의사항

ShaderMask는 매우 강력한 위젯이지만, 일부 제한 사항도 있습니다. 예를 들어, 일부 BlendMode는 플랫폼 간 차이가 있을 수 있으며, 사용 시 성능을 주의해야 합니다. 고해상도 이미지나 복잡한 화면에서는 렌더링 성능이 저하될 수 있으므로 필요한 부분에만 사용하는 것이 좋습니다.

결론

Flutter의 ShaderMask 위젯은 텍스트, 이미지, 아이콘 등 다양한 UI 요소에 멋진 그라데이션과 패턴 효과를 줄 수 있는 매우 유용한 도구입니다. LinearGradient, RadialGradient, 그리고 BlendMode 등과 함께 사용하면, 단조로운 디자인에 생동감을 더하고 사용자 경험을 풍부하게 할 수 있습니다. Flutter로 앱을 개발하면서 보다 감각적이고 창의적인 디자인을 추가하고 싶다면, ShaderMask 위젯을 꼭 활용해 보세요!