[flutter] Iconly 라이브러리를 활용하여 앱 아이콘에 그라데이션 효과 추가하기

14 Dec 2023

flutter

많은 앱이 돋보이는 아이콘을 통해 특색을 내고 있습니다. 아이콘이 사용자들의 시선을 끄는 데 많은 영향을 미치기 때문에, 아이콘 디자인에 많은 신경을 써야합니다. 이 글에서는 Iconly 라이브러리를 사용하여 Flutter 앱의 아이콘에 그라데이션 효과를 추가하는 방법에 대해 알아보겠습니다.

Iconly 라이브러리란?

Iconly는 Flutter 앱 개발을 위한 벡터 아이콘 세트 라이브러리입니다. 이 라이브러리는 36개의 카테고리와 900개 이상의 벡터 아이콘을 제공하며, 쉽게 커스터마이징할 수 있는 디자인을 제공합니다.

그라데이션 효과 추가하기

아래는 Iconly 라이브러리에서 ‘home’ 아이콘을 사용하여 그라데이션 효과를 추가하는 예시 코드입니다.

import 'package:flutter/material.dart';
import 'package:iconly/iconly.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gradient Icon'),
        ),
        body: Center(
          child: Icon(
            Iconly.home,
            size: 100,
            color: Colors.white,
          ),
        ),
        backgroundColor: Colors.blue,
      ),
    );
  }
}

위 코드에서는 Iconly.home을 사용하여 ‘home’ 아이콘을 가져오고, Colors.white를 사용하여 아이콘의 색상을 흰색으로 지정했습니다. 이제 이 아이콘에 그라데이션 효과를 추가해 보겠습니다.

Center(
  child: ShaderMask(
    blendMode: BlendMode.srcATop,
    shaderCallback: (Rect bounds) {
      return LinearGradient(
        colors: [Colors.blue, Colors.green],
      ).createShader(bounds);
    },
    child: Icon(
      Iconly.home,
      size: 100,
      color: Colors.white,
    ),
  ),
)

위 코드에서는 ShaderMask를 사용하여 아이콘에 그라데이션 효과를 적용했습니다. shaderCallback 함수를 사용하여 그라데이션 색상 및 위치를 설정할 수 있습니다.

이제 앱을 실행하면 ‘home’ 아이콘에 멋진 그라데이션 효과가 적용된 것을 확인할 수 있을 것입니다.

이렇게 하면 Iconly 라이브러리를 사용하여 Flutter 앱의 아이콘에 그라데이션 효과를 추가할 수 있습니다. 이는 앱의 시각적인 품질을 높이고 사용자들의 시선을 끌기에 효과적인 방법입니다.

더 많은 세부 설정이나 다양한 아이콘 스타일을 사용하려면, Iconly 공식 문서를 참고하시기 바랍니다.