반응형
앱 아이콘을 바꾸는 방법은 직접 바꾸는 방법과 라이브러리를 통해서 쉽게 바꾸는 방법, 두 가지를 설명합니다.
아이콘을 직접 바꾸기 위해서는 크기별로 아이콘을 준비하여야 하기 때문에 다소 귀찮을 수 있습니다.
그렇기 때문에 이 포스팅에서는 라이브러리를 사용하여 쉽게 아이콘을 추가할 수 있는 방법을 권장합니다.
플러터 프로젝트에서 아이콘 직접 바꾸기
Android 아이콘 변경
- android - app - src - main - res - mipmap
- 해당 경로의 이미지 파일을 원하는 파일로 대체 (ic_launcher.png)
iOS 아이콘 변경
- ios - Runner - Assets.xcassets - Application.appliconset
- 해당 경로의 이미지 파일을 원하는 파일로 대체 (Icon-App.png)
라이브러리를 이용하여 앱 아이콘 변경하기
flutter launcher icons 라이브러리 추가
- 터미널에서 아래의 명령어 실행
flutter pub add flutter_launcher_icons
아이콘 파일 준비
- 프로젝트 디렉토리의 빈공간을 우클릭하여 아이콘 파일이 위치할 폴더 생성
- 폴더 이름은 본인의 취향에 맞게 입력
- 포스팅에서는 'assets' 폴더의 하위에 'icon' 폴더, 총 두 개의 폴더를 생성하였습니다.
- 아이콘 준비
- 생성한 폴더에 아이콘 파일 붙여넣기
사용할 아이콘 파일 위치 정의
- pubspec.yaml 파일 열기
- 최상위 위치(들여쓰기 없이 맨 앞)에 아래의 코드 정의, yaml 파일은 들여쓰기의 위치를 주의하여야 함
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
flutter_launcher_icons: ^0.13.1
# 플러터 런처 아이콘 설정
flutter_launcher_icons:
android: "launcher_icon"
ios: true
image_path: "assets/icon/icon.png" # 아이콘 파일 위치
### 웹/윈도우/맥 아이콘 설정
# web:
# generate: true
# image_path: "path/to/image.png"
# background_color: "#hexcode"
# theme_color: "#hexcode"
# windows:
# generate: true
# image_path: "path/to/image.png"
# icon_size: 48 # min:48, max:256, default: 48
# macos:
# generate: true
# image_path: "path/to/image.png"
앱 아이콘 변환
- 터미널에 아래의 코드 실행
- 단순히 추가한 라이브러리를 실행해주면 설정한 아이콘 파일로 앱 아이콘이 됩니다.
flutter pub run flutter_launcher_icons
- 아래와 같이 출력된다면 아이콘 변환 성공
- 아이콘 변경 확인
참고
반응형