[flutter] Iconly 라이브러리를 사용한 앱 아이콘의 레이아웃 구성하기

14 Dec 2023

flutter

플러터(Flutter) 앱을 개발할 때 아이콘 디자인에 신경을 더 주고 싶다면, Iconly 라이브러리를 사용해보세요. Iconly는 고품질의 아이콘을 제공하며, 플러터 앱에서 사용하기 쉬운 형태로 포맷되어 있습니다. 아래에서는 Iconly 라이브러리를 사용하여 플러터 앱에서 아이콘 레이아웃을 구성하는 방법에 대해 알아보겠습니다.

1. Iconly 라이브러리 소개

Iconly는 750개 이상의 고품질 아이콘으로 구성된 오픈소스 아이콘 라이브러리입니다. 다양한 카테고리의 아이콘을 포함하고 있으며, 명확하고 세밀한 디자인으로 유용합니다. 또한, Iconly는 SVG 및 JSON 형식으로 제공되어, 플러터 앱 프로젝트에 통합하기 매우 용이합니다.

2. Iconly 라이브러리 설치

Iconly 라이브러리를 플러터 프로젝트에 추가하는 것은 간단합니다. 아래와 같이 pubspec.yaml 파일에 Iconly 라이브러리를 추가해주면 됩니다.

dependencies:
  iconly: ^1.0.0

그리고 터미널에서 아래 명령어를 실행하여 라이브러리를 가져옵니다.

flutter pub get

3. Iconly 아이콘 사용하기

Iconly 라이브러리를 성공적으로 설치하면, 이제 원하는 아이콘을 플러터 앱에서 사용할 수 있습니다. 먼저, Iconly 위젯을 Import 해주세요.

import 'package:iconly/iconly.dart';

그런 다음, 아이콘을 사용하기 원하는 위치에 다음과 같이 추가합니다.

IconlyIcon(
  IconlyBold.Home,
  size: 32,
  color: Colors.blue,
),

4. 아이콘 레이아웃 구성하기

Iconly로 가져온 다양한 아이콘들을 화면에 배열하려면, Row, Column, 또는 Grid와 같은 위젯을 사용하여 레이아웃을 구성할 수 있습니다. 예를 들어, 다음과 같이 Row 위젯을 사용하여 아이콘들을 가로로 배열할 수 있습니다.

Row(
  children: [
    IconlyIcon(IconlyBold.Home, size: 32, color: Colors.blue),
    IconlyIcon(IconlyBold.Search, size: 32, color: Colors.green),
    IconlyIcon(IconlyBold.Notification, size: 32, color: Colors.orange),
  ],
),

아이콘을 사용하는 방법과 레이아웃은 프로젝트의 요구사항에 따라 다를 수 있습니다.

5. 마무리

Iconly 라이브러리를 사용하면, 플러터 앱에서 아이콘을 쉽게 사용할 수 있습니다. 이 라이브러리의 아이콘들은 고품질이며, 다양한 카테고리에서 찾아볼 수 있습니다. Iconly를 활용하여 앱을 디자인할 때 아이콘 부분에 대해 더 신경 쓸 수 있을 것입니다.

Iconly 라이브러리에 대한 자세한 정보는 공식 GitHub 페이지를 참고하세요.

이상으로 Iconly 라이브러리를 사용하여 플러터 앱에서 아이콘 레이아웃을 구성하는 방법에 대해 알아보았습니다.

목차

1. Iconly 라이브러리 소개

2. Iconly 라이브러리 설치

3. Iconly 아이콘 사용하기

4. 아이콘 레이아웃 구성하기

5. 마무리