티스토리 뷰

Mobile/Flutter

[Flutter] 손쉽게 Custom Icon 제작하는 방법

풍요로운 해구름 2020. 12. 1. 11:59

수많은 오픈소스 아이콘 중에서 원하는 아이콘만 사용하고 싶을때, 직접 제작한 아이콘을 사용하고 싶을 때 이용할 수 있는 서비스를 안내해드립니다.

  1. FlutterIcon.com에 접속합니다.
  2. 현존하는 오픈소스 아이콘 리스트가 제공되며, 원하는 아이콘을 선택합니다. 직접 제작한 아이콘은 SVG로 만들어 추가할 수 있습니다.
  3. 좌측 상단에 사용할 폰트 이름을 기재하고, 다운로드를 입력하면 Zip파일이 다운로드 됩니다.
    다운로드 버튼
  4. 압축파일을 풀면 폰트파일, json, dart 파일이 나타납니다.
    압축해제
  5. config.json은 현재 폰트파일에 대한 메타정보입니다. fluttericon.com에 재방문하셨을 때 Import를 통해 선택된 아이콘을 복원할 수 있습니다.
    Import 하기
  6. .ttf 파일을 플러터 프로젝트의 fonts 폴더에 추가합니다. (예: 프로젝트 루트/fonts/CustoIcons.ttf)
  7. .dart 파일을 플러터 프로젝트의 lib 폴더 하위에 적당한 곳에 위치시킵니다. (예: 프로젝트 루트/lib/common/custom_icons_icons.dart)
  8. pubspec.yml을 열고 아래와 같이 flutter: 하위에 font 설정을 추가해주세요.
    flutter:
      fonts:
        - family:  CustomIcons
          fonts:
          - asset: fonts/CustomIcons.ttf
    
  9. 아이콘을 사용하는 방법은 간단합니다.
    FloatingActionButton(
      child: Icon(CustomIcons.sitemap)
    )
    
댓글
댓글쓰기 폼