플러터에서 ShaderMask 위젯 사용법과 다양한 옵션 가이드

 

Flutter에서 텍스트나 이미지에 다양한 시각 효과를 적용하고 싶다면 ShaderMask 위젯을 활용할 수 있습니다.

ShaderMask는 자식 위젯에 쉐이더를 적용하여, 그라디언트, 패턴, 이미지 등을 효과적으로 입힐 수 있습니다.

이번 포스트에서는 ShaderMask 위젯의 기본 사용법과 다양한 옵션을 소개하고, 실습 예제를 통해 이해를 돕겠습니다.

1. ShaderMask 위젯이란?

ShaderMask는 자식 위젯에 쉐이더(Shader)를 적용하는 데 사용되는 Flutter 위젯입니다.

쉐이더는 텍스트, 이미지, 도형 등에 시각적 효과를 추가하는 데 유용하며, 다양한 형태의 그래디언트, 이미지, 패턴 등을 표현할 수 있습니다.

주요 특징

• 시각적 효과: 텍스트, 이미지, 도형 등에 다양한 시각적 효과를 적용할 수 있습니다.
• 다양한 쉐이더 유형: LinearGradient, RadialGradient, SweepGradient, ImageShader 등 여러 가지 쉐이더를 지원합니다.
• 자유로운 디자인: 효과를 적용할 위젯의 모양과 크기에 구애받지 않고 다양한 디자인을 구현할 수 있습니다.

2. ShaderMask 기본 사용법

ShaderMask 위젯을 사용하여 텍스트에 그라디언트를 적용하는 기본 예제를 살펴보겠습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter ShaderMask 예제'),
        ),
        body: Center(
          child: ShaderMask(
            shaderCallback: (bounds) => LinearGradient(
              colors: [Colors.blue, Colors.red],
            ).createShader(bounds),
            child: Text(
              '그라디언트 텍스트',
              style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );
  }
}

코드 설명

• shaderCallback: shaderCallback 속성에 쉐이더를 생성하는 함수를 제공합니다. 여기서는 LinearGradient를 사용해 색상 그라디언트를 생성합니다.
• Text 위젯: ShaderMask로 감싸진 Text 위젯에 그라디언트 효과가 적용됩니다.

3. ShaderMask의 주요 옵션

ShaderMask는 다양한 쉐이더를 지원하며, 각 쉐이더는 고유의 옵션을 제공합니다. 아래에서는 몇 가지 주요 쉐이더와 그 옵션을 소개합니다.

3.1 LinearGradient

LinearGradient는 선형 그라디언트를 생성하는데 사용됩니다. 색상이 선형으로 변하는 효과를 줍니다.

ShaderMask(
  shaderCallback: (bounds) => LinearGradient(
    colors: [Colors.blue, Colors.green],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ).createShader(bounds),
  child: Text(
    '선형 그라디언트 텍스트',
    style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
  ),
),

• colors: 그라디언트의 색상 목록을 지정합니다.
• begin: 그라디언트의 시작 위치를 설정합니다.
• end: 그라디언트의 끝 위치를 설정합니다.

3.2 RadialGradient

RadialGradient는 원형 그라디언트를 생성합니다. 중심에서 바깥쪽으로 색상이 변하는 효과를 줍니다.

ShaderMask(
  shaderCallback: (bounds) => RadialGradient(
    colors: [Colors.purple, Colors.yellow],
    radius: 0.5,
  ).createShader(bounds),
  child: Text(
    '방사형 그라디언트 텍스트',
    style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
  ),
),

• colors: 그라디언트의 색상 목록을 지정합니다.
• radius: 그라디언트의 반경을 설정합니다.

3.3 SweepGradient

SweepGradient는 원형으로 색상이 변하는 효과를 줍니다. 원의 중심에서 시작하여 원을 돌면서 색상이 변합니다.

ShaderMask(
  shaderCallback: (bounds) => SweepGradient(
    colors: [Colors.red, Colors.orange, Colors.yellow, Colors.green],
    startAngle: 0.0,
    endAngle: 3.14 * 2,
  ).createShader(bounds),
  child: Text(
    '스윕 그라디언트 텍스트',
    style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
  ),
),

• colors: 그라디언트의 색상 목록을 지정합니다.
• startAngle: 그라디언트의 시작 각도를 설정합니다.
• endAngle: 그라디언트의 끝 각도를 설정합니다.

3.4 ImageShader

ImageShader는 이미지를 쉐이더로 사용하여 패턴을 적용할 수 있습니다.

ShaderMask(
  shaderCallback: (bounds) => ImageShader(
    AssetImage('assets/pattern.png'),
    TileMode.repeat,
    TileMode.repeat,
    Matrix4.identity().storage,
  ),
  child: Text(
    '이미지 패턴 텍스트',
    style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
  ),
),

• AssetImage: 사용될 이미지 파일을 지정합니다.
• TileMode: 이미지의 타일링 방식입니다. repeat, mirror, clamp 등이 있습니다.

4. ShaderMask 활용 예제

4.1 버튼에 쉐이더 적용

버튼에 ShaderMask를 적용하여 시각적으로 매력적인 UI 요소를 만들 수 있습니다.

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
    ),
    borderRadius: BorderRadius.circular(10),
  ),
  child: ShaderMask(
    shaderCallback: (bounds) => LinearGradient(
      colors: [Colors.red, Colors.yellow],
    ).createShader(bounds),
    child: ElevatedButton(
      onPressed: () {},
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.transparent,
        shadowColor: Colors.transparent,
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      ),
      child: Text('그라디언트 버튼'),
    ),
  ),
),

4.2 프로필 이미지에 쉐이더 적용

프로필 이미지에 쉐이더를 적용하여 색상 효과를 줄 수 있습니다.

ShaderMask(
  shaderCallback: (bounds) => RadialGradient(
    colors: [Colors.blue, Colors.transparent],
    radius: 0.5,
  ).createShader(bounds),
  child: CircleAvatar(
    backgroundImage: AssetImage('assets/profile.jpg'),
    radius: 50,
  ),
),

5. 결론

ShaderMask 위젯은 Flutter에서 다양한 시각 효과를 적용할 수 있는 강력한 도구입니다. 쉐이더를 사용하여 텍스트, 이미지 등 다양한 요소에 그라디언트, 패턴, 이미지 효과를 쉽게 적용할 수 있습니다. 이 가이드를 통해 ShaderMask의 기본 사용법과 주요 옵션을 익히고, 앱의 디자인을 한 단계 업그레이드하세요!

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱