[flutter] Iconly 라이브러리의 아이콘들을 사용하여 앱의 헤더 디자인하기

14 Dec 2023

flutter

이번 튜토리얼에서는 Iconly 라이브러리를 사용하여 플러터(Flutter) 앱의 헤더를 디자인하는 방법을 알아보겠습니다. Iconly는 다양한 스타일의 아이콘을 제공하는 라이브러리로, 아이콘들을 쉽게 사용할 수 있습니다.

1. Iconly 라이브러리 추가하기

먼저, Iconly 라이브러리를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  iconly: ^1.0.0

의존성을 추가한 뒤, 터미널에서 flutter pub get 명령을 실행하여 라이브러리를 다운로드 받습니다.

2. Iconly 아이콘 사용하기

이제, Iconly 라이브러리에서 제공하는 아이콘을 사용하여 헤더를 디자인해보겠습니다. 예를 들어, 다음과 같이 코드를 작성하여 헤더에 Iconly 아이콘을 추가할 수 있습니다:

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

class CustomHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 16, horizontal: 24),
      decoration: BoxDecoration(
        color: Colors.blue,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Row(
        children: [
          Icon(Iconly.Home, color: Colors.white, size: 32),
          SizedBox(width: 16),
          Text(
            '홈',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        ],
      ),
    );
  }
}

위의 예시에서는 Iconly.Home을 사용하여 홈 아이콘을 헤더에 추가하였습니다.

이와 같이, Iconly 라이브러리를 사용하여 다양한 스타일의 아이콘을 쉽게 플러터 앱에 추가할 수 있습니다.

Iconly 라이브러리에 대한 더 많은 정보는 공식 문서에서 확인할 수 있습니다.

이렇게하여, Iconly 라이브러리를 사용하여 플러터 앱의 헤더를 디자인하는 방법에 대해 간단히 알아보았습니다.