PromleeBlog
sitemapaboutMe

posting thumbnail
Flutter에서 앱 아이콘/이름 설정하기 (flutter_launcher_icons)
Setting App Icon/Name in Flutter (flutter_launcher_icons)

📅
🚀

들어가기 전에🔗

이 포스팅은 Flutter 3.24 버전 기준으로 작성되었습니다.
플러터 설치가 완료된 상태로 가정하고 진행합니다.
✅

개요🔗

플러터 프로젝트를 설정하면 기본적으로 플러터 로고가 앱 아이콘으로 설정되어 있습니다. 이를 변경하고 싶을 때가 있습니다. 이때 사용하는 패키지가 flutter_launcher_icons입니다. 이 패키지를 사용하면 플러터 프로젝트의 앱 아이콘과 이름을 쉽게 설정할 수 있습니다.
🚀

앱 아이콘 변경하기🔗

✅

1. 패키지 설치🔗

flutter_launcher_icons 패키지를 설치합니다.
flutter pub add flutter_launcher_icons
✅

2. 설정 파일 생성🔗

다음 명령어를 입력하여 설정 파일을 생성합니다.
dart run flutter_launcher_icons:generate
그러면 다음과 같은 파일이 생성됩니다.
flutter_launcher_icons.yaml
# flutter pub run flutter_launcher_icons
flutter_launcher_icons:
  image_path: "assets/icon/icon.png"
 
  android: "launcher_icon"
  # image_path_android: "assets/icon/icon.png"
  min_sdk_android: 21 # android min sdk min:16, default 21
  # adaptive_icon_background: "assets/icon/background.png"
  # adaptive_icon_foreground: "assets/icon/foreground.png"
  # adaptive_icon_monochrome: "assets/icon/monochrome.png"
 
  ios: true
  # image_path_ios: "assets/icon/icon.png"
  remove_alpha_channel_ios: true
  # image_path_ios_dark_transparent: "assets/icon/icon_dark.png"
  # image_path_ios_tinted_grayscale: "assets/icon/icon_tinted.png"
  # desaturate_tinted_to_grayscale_ios: true
 
  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"
✅

3. 아이콘 이미지 만들기🔗

assets/logo/icon.png 경로로 이미지를 넣어주세요. 이미지가 준비되어있지 않다면 다음 링크들에서 아이콘을 만들어 사용할 수 있습니다.
✅

4. 아이콘 적용🔗

flutter_launcher_icons.yaml 파일을 수정합니다.
flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/logo/icon.png"
  adaptive_icon_background: "#ffffff"
  adaptive_icon_foreground: "assets/logo/icon.png"
  remove_alpha_ios: true
다음 명령어를 입력하여 아이콘을 적용합니다.
flutter pub get
dart run flutter_launcher_icons
이렇게 되면 아이콘이 변경되었습니다. 이제 앱 이름을 변경해보겠습니다.
🚀

앱 이름 변경🔗

✅

1. Android🔗

android/app/src/main/AndroidManifest.xml 파일을 열어서 다음과 같이 수정합니다. android:label에 앱 이름을 입력합니다.
<application
		android:label="앱 이름"
		android:icon="@mipmap/ic_launcher">
✅

2. iOS🔗

ios/Runner/Info.plist 파일을 열어서 다음과 같이 수정합니다. CFBundleDisplayName에 앱 이름을 입력합니다.
<key>CFBundleDisplayName</key>
<string>앱 이름</string>
🚀

결론🔗

✅

참고🔗

🚀 들어가기 전에
✅ 개요
🚀 앱 아이콘 변경하기
✅ 1. 패키지 설치
✅ 2. 설정 파일 생성
💡 flutter pub run flutter_launcher_icons
✅ 3. 아이콘 이미지 만들기
✅ 4. 아이콘 적용
🚀 앱 이름 변경
✅ 1. Android
✅ 2. iOS
🚀 결론
✅ 참고