[flutter] Iconly 라이브러리에서 제공하는 아이콘들을 다양한 배경에 활용하기

14 Dec 2023

flutter

아이콘은 앱 디자인에서 중요한 부분이며, Flutter를 사용하여 앱을 개발할 때는 Iconly 라이브러리를 활용하여 아이콘을 사용할 수 있습니다. 이 라이브러리에서 제공하는 아이콘을 커스터마이징하여 다양한 배경에 삽입할 수 있습니다.

Iconly 라이브러리 추가하기

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

dependencies:
  iconly: ^1.0.0

그런 다음, pubspec.yaml 파일이나 터미널에서 flutter pub get 명령을 실행하여 Iconly 라이브러리를 설치합니다.

Iconly 라이브러리에서 아이콘 가져와서 사용하기

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

class MyIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      padding: EdgeInsets.all(20),
      child: Icon(
        Iconly.boldBookmark, // Iconly 라이브러리에서 제공하는 아이콘 중 하나를 선택합니다.
        color: Colors.white,
        size: 50,
      ),
    );
  }
}

다양한 배경에 아이콘 삽입하기

Container 위젯을 사용하여 배경색을 설정하고, Icon 위젯을 사용하여 Iconly 라이브러리에서 가져온 아이콘을 삽입할 수 있습니다. 다음은 몇 가지 예시입니다.

배경이 파란색인 경우:

Container(
  color: Colors.blue,
  padding: EdgeInsets.all(20),
  child: Icon(
    Iconly.boldBookmark,
    color: Colors.white,
    size: 50,
  ),
)

배경이 빨간색인 경우:

Container(
  color: Colors.red,
  padding: EdgeInsets.all(20),
  child: Icon(
    Iconly.boldBookmark,
    color: Colors.white,
    size: 50,
  ),
)

결론

Iconly 라이브러리를 사용하면 Flutter 앱에 다양한 배경에 아이콘을 쉽게 삽입할 수 있습니다. 이를 통해 앱의 시각적 효과를 향상시킬 수 있습니다. 여러분도 Iconly 라이브러리를 사용하여 앱의 아이콘을 디자인하는데 적극 활용해보세요.

더 많은 아이콘 및 기능에 대한 자세한 정보는 Iconly 라이브러리 문서를 참고하시기 바랍니다.