Flutter에서 Material UI Icon과 Cupertino Icon 검색하고 사용하기

Flutter로 App을 개발할 때 무료로 배포된 아이콘을 사용하는 경우가 많습니다. 물론 개발팀에 GUI 디자이너가 있다면 이쁜 아이콘을 만들 수 있지만, App Bar나 Menu 에서는 다른 App과 일관성을 가지기 위해서 필요한 아이콘을 찾아 적용하는 경우도 많습니다.

Flutter에서 사용할 수 있는 아이콘은 대표적으로 Google에서 만든 Materal UI와 Apple App 스타일의 Cupetino 아이콘이 있습니다. 본 포스팅은 Material UI와 Cupertino Icon에서 적용하고자 하는 아이콘을 검색하고 사용하는 방법을 설명합니다.

Flutter에서 많이 사용하는 아이콘:

Material UI Icon: Google Style Icons
Cuppertino Icon: Apple Style Icons

Material UI 아이콘

Flutter에서는 기본적으로 Material UI로 설정되어 있어 추가적인 설정을 필요 없고, 적용하고자 하는 Icon의 ID를 찾으면 사용할 수 있습니다.

Google Font 사이트에서 Icon 검색: https://fonts.google.com/icons?selected=Material+Icons
적용하고자 하는 아이콘 선택
오른쪽 화면에서 Icon ID를 복사

pubspec.yaml 파일

Flutter Project 생성 시 기본 값으로 설정되어 있습니다.

flutter:
uses-material-design: true

Dart code

Project code의 main.dart파일 상단에 material.dart 파일을 Import 하고, Icon class의 객체를 만들어 사용할 수 있습니다. Icon class는 Icon ID, color, size, accessibility mode에서의 text를 설정할 수 있습니다.

import 'package:flutter/material.dart';

Cupertino UI 아이콘

Cupertino 아이콘은 Apple style의 아이콘으로 Flutter pub 사이트 관련 정보가 있습니다. Icon을 한 번에 볼 수 있는 Gallery 사이트가 찾기 어렵습니다. (※Flutter 공식 문서에 있는 Gallery site는 404 에러 발생)

Cupertino library site: https://pub.dev/packages/cupertino_icons
Icon Gallery: pub.dev 사이트의 Versions Tab에서 폰트 파일을 다운로드합니다. 로컬에서 폰트 파일에 포함된 Index.html 실행
Cupertino Icon 설치 : pubspec.yaml 파일 dependencies 항목에 cupertino_icons 추가
Dart Code에 적용: package:cupertino_icons/cupertino_icons.dart import 후 Icon class 사용