Flutter의 커스텀 아이콘(Custom Icons) 사용법

Flutter에서 제공하는 기본 아이콘 외에도, 앱의 디자인 요구에 맞게 커스텀 아이콘을 사용할 수 있습니다. 커스텀 아이콘은 앱의 개성을 부각시키고, 사용자 경험을 향상시키는 중요한 요소입니다. 이번 글에서는 Flutter에서 커스텀 아이콘을 사용하는 방법을 단계별로 설명하겠습니다.

1. 커스텀 아이콘 준비

Flutter에서 커스텀 아이콘을 사용하려면, 벡터 이미지 형식인 SVG 또는 TrueType Font (TTF) 형식의 아이콘 파일을 사용해야 합니다. 일반적으로 IconFont(TTF) 형식을 사용하여 다수의 아이콘을 한 번에 관리할 수 있으며, FlutterIcon 같은 온라인 도구를 통해 커스텀 아이콘을 생성할 수 있습니다.

1.1 커스텀 아이콘 폰트 생성 (FlutterIcon)

1. FlutterIcon 웹사이트에 접속합니다.
2. 원하는 아이콘을 선택하거나, 자신만의 SVG 파일을 업로드합니다.
3. 아이콘을 선택한 후, "Download" 버튼을 클릭하여 .zip 파일을 다운로드합니다.
4. 다운로드한 파일을 해제하면, .ttf 파일과 config.json, icons.dart 등의 파일을 얻을 수 있습니다.

2. 아이콘 폰트 파일을 프로젝트에 추가

커스텀 아이콘 폰트 파일을 Flutter 프로젝트에 추가하여 사용합니다.

 

2.1 폰트 파일을 assets 폴더에 저장

Flutter 프로젝트의 assets 폴더에 커스텀 아이콘 폰트 파일을 저장합니다. 폴더 구조는 다음과 같습니다.

lib/
assets/
  fonts/
    custom_icons.ttf

 

2.2 pubspec.yaml 파일에 폰트 등록

pubspec.yaml 파일에 커스텀 아이콘 폰트를 등록해야 합니다. 아래와 같이 flutter 섹션에 폰트 파일을 추가합니다.

flutter:
  fonts:
    - family: CustomIcons  # 아이콘 패밀리 이름
      fonts:
        - asset: assets/fonts/custom_icons.ttf

 

3. 커스텀 아이콘 클래스 설정

FlutterIcon을 사용했다면 icons.dart 파일이 함께 제공됩니다. 이 파일을 lib 폴더에 저장하고, 커스텀 아이콘 클래스를 사용하여 아이콘을 앱에 적용할 수 있습니다.

 

3.1 icons.dart 파일 사용

icons.dart 파일에는 IconData를 통해 커스텀 아이콘을 Flutter에서 사용할 수 있도록 정의되어 있습니다. 예를 들어, icons.dart 파일에 다음과 같이 정의되어 있을 수 있습니다.

import 'package:flutter/widgets.dart';

class CustomIcons {
  CustomIcons._();

  static const _kFontFam = 'CustomIcons';

  static const IconData home = IconData(0xe800, fontFamily: _kFontFam);
  static const IconData user = IconData(0xe801, fontFamily: _kFontFam);
  static const IconData settings = IconData(0xe802, fontFamily: _kFontFam);
}

 

CustomIcons 클래스는 폰트 패밀리(_kFontFam)와 아이콘 코드들을 정의하고 있습니다. IconData 객체를 사용하여 커스텀 아이콘을 정의하고, Flutter의 Icon 위젯에서 사용할 수 있도록 합니다.

 

 

반응형

 

 

4. 커스텀 아이콘 사용

아이콘 클래스를 정의한 후, 앱 내에서 Icon 위젯을 사용하여 커스텀 아이콘을 쉽게 적용할 수 있습니다.

 

4.1 커스텀 아이콘 적용 예제

import 'package:flutter/material.dart';
import 'icons.dart';  // 커스텀 아이콘 클래스 import

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Icons Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(CustomIcons.home, size: 50, color: Colors.blue),  // 커스텀 아이콘 사용
              Icon(CustomIcons.user, size: 50, color: Colors.green),
              Icon(CustomIcons.settings, size: 50, color: Colors.orange),
            ],
          ),
        ),
      ),
    );
  }
}

 

위 코드에서는 Icon 위젯을 사용하여 커스텀 아이콘을 화면에 표시하고 있습니다. CustomIcons.home, CustomIcons.user, CustomIcons.settings는 각각 아이콘 클래스로 정의한 커스텀 아이콘을 나타냅니다.

5. SVG 아이콘 사용

TTF 형식 외에도, SVG 형식의 아이콘을 사용하려면 flutter_svg 패키지를 활용할 수 있습니다. 이는 벡터 이미지 형식의 SVG 아이콘을 직접 사용할 수 있게 해줍니다.

 

5.1 flutter_svg 패키지 설치

pubspec.yaml 파일에 flutter_svg 패키지를 추가합니다.

dependencies:
  flutter_svg: ^1.0.0

 

 

728x90

 

 

5.2 SVG 파일을 assets에 추가

SVG 파일을 프로젝트의 assets 폴더에 추가합니다.

lib/
assets/
  icons/
    custom_icon.svg

 

5.3 SVG 아이콘 사용 예제

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SVG Icons Example'),
        ),
        body: Center(
          child: SvgPicture.asset(
            'assets/icons/custom_icon.svg',  // SVG 파일 경로
            height: 100,
            width: 100,
            color: Colors.blue,  // 아이콘 색상
          ),
        ),
      ),
    );
  }
}

 

SvgPicture.asset 메서드를 사용하여 SVG 아이콘을 화면에 표시할 수 있습니다. Flutter에서 SVG 아이콘을 사용하는 방법은 고해상도 이미지를 지원하며, 벡터 그래픽으로서 크기와 해상도에 영향을 받지 않는 장점이 있습니다.

6. 아이콘 크기와 색상 커스터마이징

Flutter에서 커스텀 아이콘의 크기와 색상은 Icon 위젯과 SvgPicture 위젯을 통해 쉽게 조정할 수 있습니다.

 

6.1 크기와 색상 변경

Icon(
  CustomIcons.home,
  size: 80,  // 크기 조정
  color: Colors.red,  // 색상 조정
),

 

위 코드에서는 size 속성을 사용해 아이콘 크기를 80으로 설정하고, color 속성을 사용해 아이콘 색상을 빨간색으로 변경했습니다.

 

6.2 SVG 아이콘 크기 및 색상

SvgPicture.asset(
  'assets/icons/custom_icon.svg',
  height: 100,  // SVG 아이콘 높이
  width: 100,   // SVG 아이콘 너비
  color: Colors.green,  // SVG 아이콘 색상
),

 

SVG 아이콘에서도 height, width 속성으로 크기를 설정하고, color 속성으로 색상을 변경할 수 있습니다.

결론

Flutter에서 커스텀 아이콘을 사용하면 앱의 디자인을 더욱 독창적으로 만들 수 있습니다. TTF 폰트 형식의 커스텀 아이콘을 사용하거나, SVG 아이콘을 활용하여 고해상도의 벡터 이미지를 지원할 수 있습니다. 이번 글에서 설명한 방법을 활용하여 Flutter 애플리케이션에서 커스텀 아이콘을 쉽게 설정하고 적용해보세요. 앱의 브랜드 아이덴티티를 강화하고 사용자 경험을 향상시키는 데 큰 도움이 될 것입니다.