[flutter] Iconly 라이브러리를 활용하여 앱의 아이콘 스타일을 퇴색효과로 변환하기

14 Dec 2023

모바일 앱을 개발하다보면 사용자 경험을 향상시키기 위해 아이콘 스타일을 다양하게 변환해 보고 싶을 때가 있습니다. 이번 글에서는 Iconly 라이브러리를 활용하여 앱의 아이콘을 퇴색효과로 변환하는 방법을 살펴보겠습니다.

Iconly 라이브러리란?

Iconly는 파란색과 검은색으로 구성된 단순한 아이콘으로 구성된 무료 아이콘 UI 패키지입니다. 풍부한 선택 예쁜 아이콘을 제공하고 있으며, SVG 지원을 통해 크기를 조절하기 쉽습니다.

Iconly 라이브러리 추가

먼저 프로젝트의 pubspec.yaml 파일에서 dependencies 섹션에 아래와 같이 Iconly 라이브러리를 추가합니다.
```
dependencies:
  iconly: ^1.0.0
```
아이콘 추가 및 사용

Iconly에서 제공하는 아이콘을 사용하려면 먼저 해당 아이콘을 프로젝트에 등록해야 합니다. 이후 아래와 같이 Icon 위젯을 사용하여 Iconly 라이브러리의 아이콘을 화면에 표시할 수 있습니다.
```
import 'package:iconly/iconly.dart';
   
Icon(
  IconlyLight.arrowLeft,  // 사용할 아이콘 선택
  color: Colors.grey,  // 아이콘 색상 지정
  size: 32.0,  // 아이콘 크기 지정
)
```
아이콘 퇴색효과 적용

Iconly 라이브러리에서 제공하는 아이콘을 그대로 사용하되, 앱의 UI 상황에 따라 아이콘의 색상을 퇴색효과로 변환할 수 있습니다. 이를 위해 아래 코드와 같이 Icon 위젯의 color 속성에 Colors.grey 또는 Colors.black54와 같은 퇴색된 색상을 사용하여 아이콘을 퇴색시킬 수 있습니다.
```
Icon(
  IconlyLight.arrowLeft,  // 사용할 아이콘 선택
  color: Colors.grey.withOpacity(0.5),  // 아이콘을 퇴색효과로 표현
  size: 32.0,  // 아이콘 크기 지정
)
```

위와 같은 방법을 통해 Iconly 라이브러리를 활용하여 앱의 아이콘을 퇴색효과로 변환할 수 있습니다. 이를 통해 사용자의 경험을 더욱 향상시킬 수 있습니다.

참고문헌: