Flutter[플러터] / ShaderMask 를 사용하여 텍스트에 그라디언트 적용하기 (위젯, 쉐이더, 마스크, 디자인, 효과) ShaderMask (Flutter Widget of the Week)

ShaderMask class

셰이더 에서 생성된 마스크를 자식 위젯에 적용하는 위젯입니다.

예를 들어, ShaderMask를 사용하면 RadialGradient 마스크를 사용하여 자식 요소의 가장자리를 점차적으로 페이드 아웃할 수 있습니다.

https://youtu.be/7sUL66pTQ7Q

공식 문서 코드

 

---

우리가 텍스트를 사용하다 보면 텍스트에 그라디언트를 넣어주고 싶을 때가 있다. 근데 텍스트의 파라미터에는 그라디언트를 먹일 수 있는 속성이 존재하지 않는다. 이럴 때 위젯에 디자인을 덮어 씌우는 형식으로 셰이더를 추가해 줄 수 있는 위젯이 있는데 바로 ShaderMask 위젯이다.

이 ShaderMask 위젯은 자식 위젯에 셰이더(Shader)를 적용하여 시각적인 효과를 줄 수 있는 위젯이다. 주로 텍스트나 이미지에 그라디언트, 패턴, 커스텀 셰이더 등을 입히고 싶을 때 사용하곤 한다. 바로 알아보자.

하위 속성

속성명	타입	기본값	설명
shaderCallback	ShaderCallback	–	자식의 크기를 기반으로 Shader를 생성하는 콜백 함수
blendMode	BlendMode	BlendMode.modulate	Shader를 자식 위젯에 어떻게 합성할지 결정할 블렌드 모드
child	Widget	–	마스킹 효과가 적용될 자식 위젯

 

사용법은 정말 간단하다.

일단 먼저 ShaderMask 위젯은 필수 파라미터로 shaderCallback 를 주는데 여기에다가 Rect 타입의 bouns 를 넣어주면 된다.

ShaderMask(
  shaderCallback: (bounds) {
    // TODO
  },
)

이제 본인이 원하는 효과를 리턴해주면 되는데 나는 LinearGradient 를 사용해 주겠다.

그래서 이렇게 코드를 적어보면 

ShaderMask(
  shaderCallback: (bounds) {
    return LinearGradient(colors: []);
  },
)

이런 오류가 뜰 거다.

이런 오류가 생기는 이유로는 바로 Shader 객체를 직접 생성하기 위해서인데 현재 코드에서는 실제 객채가 생성이 되지 않아 있어서 오류가 나는 것이다.

보통 사용활 LinearGradient, RadialGradient, SweepGradient 등의 위젯들은 모두 Shader 를 생성할 수 있는 객체들인데 이 위젯들은 모두 자체로 Shader 가 아니기 때문에 createShader(Rect bounds) 라는 메서드를 넣어줘야 실제 Shader 인스텐스를 만들어내게 된다.

그래서 사용은 결국 이렇게 하면 된다.

ShaderMask(
  shaderCallback: (bounds) {
    return LinearGradient(
      colors: [],
    ).createShader(bounds); // 위에서 넘겨준 bounds
  },
)

이런 식이면 된다.

그럼 이제 기본적인 사용을 위한 준비는 끝난 것이고 실제로 사용하려면 ShaderMask 의 하위 속성인 child 에 이 셰이더를 적용할 위젯을 넣어주면 끝이다.

ShaderMask(
  shaderCallback: (bounds) {
    return LinearGradient(
      colors: [
        Colors.blue,
        Colors.red
      ],
    ).createShader(bounds);
  },
  child: Text('셰이더 마스크', style: TextStyle(color: Colors.white),),
)

이렇게 간단하게 ShaderMask 위젯에 대해서 알아보았다. 도움이 되었길 바라며 마치겠다.