[flutter] Iconly 라이브러리를 활용하여 앱 아이콘에 그림자 효과 적용하기

14 Dec 2023

flutter

이번 포스트에서는 Flutter에서 Iconly 라이브러리를 사용하여 앱 아이콘에 그림자 효과를 적용하는 방법에 대해 알아보겠습니다.

1. Iconly 라이브러리란?

Iconly는 간결하고 세련된 아이콘 세트로, 다양한 아이콘을 제공하면서도 일관된 스타일을 유지합니다. 또한, 커스터마이징이 쉽다는 장점을 가지고 있습니다.

2. Iconly 라이브러리 설치

먼저, pubspec.yaml 파일의 dependencies에 아래와 같이 Iconly 라이브러리를 추가합니다.

dependencies:
  iconly: ^latest_version

그다음, 터미널에서 flutter packages get 명령어를 실행하여 라이브러리를 설치합니다.

3. 그림자 효과 적용하기

아래 코드는 Iconly 라이브러리를 사용하여 앱 아이콘에 그림자 효과를 적용하는 예제입니다.

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

class ShadowedIcon extends StatelessWidget {
  final IconData icon;
  final double size;
  final Color color;

  const ShadowedIcon({
    Key? key,
    required this.icon,
    this.size = 24.0,
    this.color = Colors.black,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Icon(
          icon,
          size: size,
          color: color,
        ),
        Positioned(
          top: 2.0,
          left: 2.0,
          child: Icon(
            icon,
            size: size,
            color: Colors.black.withOpacity(0.2),
          ),
        ),
      ],
    );
  }
}

위 코드에서 ShadowedIcon 위젯은 Iconly 아이콘을 사용하고, 해당 아이콘 위에 부분적으로 투명한 블랙 컬러로 구성된 그림자 효과를 적용합니다.

이제, ShadowedIcon 위젯을 사용하여 아이콘에 그림자 효과를 쉽게 적용할 수 있습니다.

이상으로, Iconly 라이브러리를 사용하여 Flutter 앱 아이콘에 그림자 효과를 적용하는 방법에 대해 알아보았습니다.

더 많은 정보는 Iconly GitHub 페이지에서 확인할 수 있습니다.