Colin's Blog
[flutter] Iconly 라이브러리를 사용하여 앱 아이콘에 그림자 및 깊이 효과 추가하기

앱의 아이콘은 사용자들에게 직관적이고 인상적인 시각적 경험을 제공합니다. Iconly는 이러한 아이콘 디자인을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. Flutter 앱에 Iconly를 통해 그림자 및 깊이 효과를 추가하는 방법을 알아보겠습니다.

Iconly 라이브러리 추가하기

먼저, pubspec.yaml 파일에 다음과 같이 Iconly 라이브러리를 추가합니다.

dependencies:
  iconly: ^1.0.0

이후, 터미널에서 flutter pub get 명령어를 사용하여 라이브러리를 다운로드 받습니다.

Iconly 아이콘 사용하기

Iconly 라이브러리에서 제공하는 아이콘을 사용하려면 먼저 해당 아이콘 세트를 선택합니다. 아래는 Iconly 라이브러리에서 제공하는 일부 아이콘 세트입니다.

그림자 효과 추가하기

Iconly에서 제공하는 아이콘을 사용하여 그림자 효과를 추가하려면, 아래의 예제 코드와 같이 Container 위젯을 사용하여 그림자를 적용할 수 있습니다.

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    shape: BoxShape.circle,
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.3),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes the shadow direction
      ),
    ],
  ),
  child: Icon(
    IconlyLight.home,
    size: 30,
    color: Colors.black,
  ),
)

위의 코드에서 BoxShadow를 통해 그림자의 색상, 퍼짐 정도, 흐림 정도, 그림자의 위치 등을 설정할 수 있습니다.

깊이 효과 추가하기

깊이 효과를 추가하려면, Iconly 라이브러리에서 제공하는 다른 아이콘을 사용하여 깊이 효과를 나타낼 수 있습니다. 예를 들어, 아래와 같이 두 개의 아이콘을 겹쳐서 사용할 수 있습니다.

Stack(
  children: <Widget>[
    Icon(
      IconlyBold.home,
      size: 30,
      color: Colors.black,
    ),
    Positioned(
      top: 5,
      left: 5,
      child: Icon(
        IconlyLight.home,
        size: 30,
        color: Colors.grey,
      ),
    ),
  ],
)

위의 코드에서는 Stack과 Positioned 위젯을 사용하여 깊이 효과를 표현했습니다. 첫 번째 아이콘은 검은색으로 표시되고, 그 위에 두 번째 아이콘을 회색으로 겹쳐 표시함으로써 깊이 효과를 나타냈습니다.

Iconly 라이브러리를 사용하여 앱 아이콘에 그림자 및 깊이 효과를 추가하는 방법에 대해 알아보았습니다. 이를 통해 앱의 아이콘을 더욱 생생하고 독창적으로 만들 수 있습니다.

더 많은 정보와 예제는 Iconly GitHub repository를 참고하시기 바랍니다.

© 2018 Colin. All rights reserved.