[flutter] 플러터 아이콘 그래디언트 사용 방법

18 Dec 2023

flutter

플러터(Flutter)를 사용하여 아이콘에 그래디언트 효과를 적용하는 방법에 대해 알아보겠습니다. 그래디언트는 색상이 부드럽게 변하는 효과를 줄 수 있는데, 아이콘에 그래디언트를 적용하면 더 독특하고 시각적으로 매력적인 디자인을 구현할 수 있습니다.

1. 그래디언트 효과를 적용할 아이콘 준비

플러터 앱에서 그래디언트를 적용할 아이콘을 준비합니다. 이 예제에서는 Icons.star를 사용하여 별 아이콘에 그래디언트를 적용해 보겠습니다.

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('아이콘 그래디언트'),
        ),
        body: Center(
          child: Icon(
            Icons.star, // 그래디언트를 적용할 아이콘
            size: 100,
          ),
        ),
      ),
    );
  }
}

2. 아이콘에 그래디언트 효과 적용

아이콘에 그래디언트 효과를 적용하려면 Stack과 ShaderMask 위젯을 사용합니다. ShaderMask 위젯은 쉐이더(Shader)를 사용하여 자식 위젯을 마스킹(masking)하는 역할을 합니다.

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('아이콘 그래디언트'),
        ),
        body: Center(
          child: Stack(
            children: [
              Icon(
                Icons.star, // 그래디언트를 적용할 아이콘
                size: 100,
              ),
              ShaderMask(
                blendMode: BlendMode.srcIn,
                shaderCallback: (Rect bounds) {
                  return LinearGradient(
                    colors: [Colors.purple, Colors.blue], // 그래디언트 색상 설정
                  ).createShader(bounds);
                },
                child: Icon(
                  Icons.star, // 그래디언트 적용할 아이콘
                  size: 100,
                  color: Colors.white, // 아이콘 색상 설정 (필수)
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 예제에서는 Stack을 사용하여 원래의 아이콘과 그래디언트를 적용한 아이콘을 겹쳐서 표시했습니다. ShaderMask 위젯을 사용하여 그래디언트 효과를 적용하고, blendMode와 shaderCallback을 설정하여 그래디언트를 적용했습니다.

이제 플러터 앱에서 아이콘에 그래디언트 효과를 적용하는 방법에 대해 알아보았습니다. 그래디언트 효과를 다양하게 적용하여 앱의 디자인을 보다 독특하게 꾸밀 수 있습니다.

참고 자료:

Flutter 공식 문서 - ShaderMask