본문 바로가기
SW 개발/FrontEnd(Flutter)

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

by Kibua20 2021. 12. 30.
728x170

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 아이콘

 

Material UI 아이콘 

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

 

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

Material UI 아이콘 

 

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'; 

Flutter Icon 추가

 

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 사용

Cupertino Icon Gallery

Cupertino Icon 최신 버전을 다운로드하여 Local에서 확인합니다.  블로그에는 V1.0.4 버전을 올렸습니다. 

cupertino_icons-1.0.4.zip
0.34MB

 

Cupertino Icon Gallery

pubspec.yaml 파일

dependencies:
  cupertino_icons: ^1.0.4

Dart code

import 'package:cupertino_icons/cupertino_icons.dart';

 

관련 글:

[SW 개발/FrontEnd(Flutter)] - Flutter 특징과 개발환경 설정 방법

[SW 개발/FrontEnd(Flutter)] - Android Studio와 Visual Code로 Flutter Project 프로젝트 생성

[SW 개발/FrontEnd(Flutter)] - Flutter Stateless와 Stateful Widget 개념과Life Cycle, 대표 Widget(MaterialApp, Scaffold)

[SW 개발/FrontEnd(Flutter)] - Flutter Parent-Child Widget간 State 전달과 업데이트 방법

[SW 개발/FrontEnd(Flutter)] - Flutter에서 Widget Tree와 layout 디자인 방법

[SW 개발/Data 분석 (RDB, NoSQL, Dataframe)] - Jupyter Notebook의 업그레이드: Jupyter Lab 설치 및 extension 사용법

[개발환경/우분투] - Ubuntu 20.04에서 NTFS Read/Write로 Mount 하기: Paragon NTFS 동작 확인

[SW 개발/Python] - Python 자동 테스트를 위한 Pytest 사용법과 예제

[SW 개발/Python] - Python 여러 버전 설치 방법 (3.x and 3.y 동시 설치)

[개발환경/Web Server] - Web Server 성능 및 Load 측정 Tool: Apache AB (Apache Http Server Benchmarking Tool)

그리드형



댓글0