플러터 앱 이름, 아이콘 변경하기

플러터 프로젝트의 기본 아이콘과 이름을 바꾸어봅시다.

 

디폴트 아이콘 모양

변경된 모습

 

1. 앱 아이콘 이미지 적용하기

1) 아이콘 이미지 만들기

아이콘 이미지 파일을 아래 사이트에서 만들어줍니다.

https://easyappicon.com/

EasyAppIcon - Create Mobile App Icon

 

내려받은 파일에서 원하는 이미지를 프로젝트에 넣어줍니다.

저는 ios 아이콘에 사용할 파일은 playstore-icon.png 파일(512x512)을 사용했고, 안드로이드 아이콘 파일은 mipmap-xxxhdpi 폴더의 ic_launcher_round.png 파일을 사용했어요.

 

https://icon.kitchen/

여기도 간단하게 아이콘으로 이미지 만들기에 좋아요!

 

 

 

2) flutter_launcher_icons 패키지 설치

https://pub.dev/packages/flutter_launcher_icons

flutter_launcher_icons | Dart package

pubspec.yaml 파일에 아래와 같이 입력하고 pub get을 한번 해줍니다.

아이폰과 안드로이드의 아이콘 이미지를 한꺼번에 설정하려면 image_path 속성 한 줄로 적용시킬 수 있습니다.

저는 이미지를 각각 반영해 주었어요.

dev에 패키지를 넣는 이유는 이 패키지는 프로젝트를 빌드하고 앱 아이콘을 생성하기 위해서 사용되기 때문입니다.

dev_dependencies:
  hive_generator: ^2.0.1
  build_runner: ^2.4.8
  flutter_launcher_icons: "^0.13.1"

flutter_launcher_icons:
  android: "launcher_icon"
  ios: "AppIcon"
  image_path_ios: "assets/images/icon.png"
  image_path_android: "assets/images/round-icon.png"
  remove_alpha_ios: true
  ...

 

remove_alpha_ios는 true로 설정해주어야 하는데 아이콘에 알파 채널이 있는 경우는 애플 스토어에서 허가되지 않는다고 합니다.

 

 

그리고 패키지 실행 명령어를 터미널에 입력하면 런처 아이콘이 설치가 완료됩니다.

flutter pub run flutter_launcher_icons

 

* 만약 현재 아이콘 이미지를 다른 이미지로 변경하고 싶을 때는 파일명을 수정한 후에, 터미널에 패키지 실행 명령어를 친 후 재시작을 하면 반영됩니다.

 

 

 

2. 앱 이름 변경하기

1) 안드로이드

AndroidManifest.xml 파일에서 application 태그의 label 값을 변경해 줍니다.

android/app/src/main/AndroidManifest.xml

    <application
        android:label="앱 이름 변경"
        android:name="${applicationName}"
        android:icon="@mipmap/launcher_icon">

 

 

 

2) ios

ios/Runner/Info.plist 파일에서 CFBundleDisplayName 키의 값을 변경해 줍니다.

ios/Runner/Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	 <key>BGTaskSchedulerPermittedIdentifiers</key>
	<array>
    <string>dev.flutter.background.refresh</string>
	</array>
	<key>CFBundleDevelopmentRegion</key>
	<string>$(DEVELOPMENT_LANGUAGE)</string>
	<key>CFBundleDisplayName</key>
	<string>앱 이름 입력</string>
    ...

 

 

 

3. 테스트

모든 설정을 하고 난 뒤 앱을 정지시키고 다시 시작하면 아래와 같이 변경된 화면을 확인할 수 있어요.

 

ios 앱 아이콘

안드로이드 앱 아이콘

 

간단하게 설정이 완료되었습니다.😆