소개

Flutter로 아이콘을 이용할 때는 기존의 Icon

const Icon(Icons.home);

그러나 기존의 아이콘으로는 표현할 수 없는 때나 무엇인가의 부족한 때가 있을까 생각합니다.
svg 파일을 가져와서 하나씩 flutter_svg

방법

ぅ 이혼. 작은 m 라는 사이트를 사용해 구현해 갑니다.

이런 느낌의 사이트입니다.


이 사이트에서 직접 가져온 SVG는 물론 MaterialIcon을 포함한 다양한 아이콘을 직접 선택하고 Dart에서 사용할 수있는 형태로 다운로드 할 수 있습니다.

1. 아이콘을 선택합니다.

우선은 사용하고 싶은 아이콘을 선택해 갑니다. FlutterIcon 사이트에 기존인 것은 클릭, 스스로 준비한 svg 형식의 아이콘은 사이트 상단으로 드래그하여 클릭하는 것으로 선택할 수 있습니다.

2. 다운로드

사용하고 싶은 아이콘을 선택할 수 있으면, 다운로드를 해 갑니다.
사이트의 오른쪽 상단에 텍스트 필드와 다운로드 버튼이 있으므로 텍스트 필드에 아이콘 세트의 제목을 설정(기본값은 MyFlutterApp)하고 다운로드 버튼을 눌러 다운로드합니다.

다운로드한 파일을 압축 해제하면 다음과 같은 파일이 들어 있습니다. fonts 폴더 안에는 ttf 형식의 파일이 있습니다.

3. 프로젝트에 설치

다운로드한 파일을 가져오면 flutter 프로젝트 내에서 선택한 사용자 정의 아이콘을 사용할 수 있습니다!

assets 폴더에 ttf 파일을 설치하고 pubspec.yaml 에 다음과 같이 작성하여 아이콘 세트를 가져올 수 있습니다.

  assets:
    - assets/ #assetsフォルダ以下を読み込む

  fonts:
    - family: MyFlutterApp #アイコンセットのタイトル
      fonts:
        - asset: assets/MyFlutterApp.ttf #設置したファイル

4. 가져온 아이콘 사용

우선 다운로드한 폴더 안에 있는 dart 파일을 설치해 갑시다!
dart 파일에는 다음과 같이 IconData가 정의된 클래스가 있습니다.

import 'package:flutter/widgets.dart';

class MyFlutterApp {
  MyFlutterApp._();

  static const _kFontFam = 'MyFlutterApp';
  static const String _kFontPkg = null;

  static const IconData insert_link = IconData(0xe800, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData insert_photo = IconData(0xe801, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData alexandergreat = IconData(0xf058, fontFamily: _kFontFam, fontPackage: _kFontPkg);
}

그리고는 이것을 좋아하는 장소에서 호출해 주는 것만으로 아이콘을 이용할 수 있게 됩니다 🙌
간단!

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Icon(MyFlutterApp.alexandergreat),
    );
  }

이제 맞춤형 아이콘을 볼 수 있습니다!
(화면의 아이콘은 주운 svg)

마지막으로

이번에는 Flutter에서 쉽게 사용자 정의 아이콘을 표시하는 방법을 소개했습니다 😀
보다 앱의 표현에 폭을 넓히고 싶은 경우는 사용해 보면 어떻습니까?
f 레에 svg. 오 rg 같은 사이트에서 여러가지 svg 파일을 다운로드할 수 있으므로 사용해 보는 것도 재미있을지도 모릅니다🙌

또 트위터 쪽에서도 Flutter의 정보도 발신해 가므로 좋으면 팔로우 부탁합니다!