[플러터] flutter_launcher_icons를 사용해서 앱 아이콘 넣기(자세히 설명)

플러터에서 앱 아이콘을 넣는 방법은 

 

기본적으로 Android와 iOS 각각 설정해주는 것입니다.

 

하지만, flutter_launcher_icons 패키지를 사용하면 좀 더 편리하게 앱 아이콘을 바꿀 수 있습니다.

---

플러터에 flutter_launcher_icons 패키지 설치하기

다음 사이트에서 flutter_launcher_icons 패키지를 설치합니다.

 

https://pub.dev/packages/flutter_launcher_icons/install

flutter_launcher_icons install | Dart package

---

플러터에서 앱 아이콘으로 등록할 Icon 만들기

이제 앱 아이콘으로 지정할 아이콘을 직접 만들어야합니다.

 

저는 canva에서 직접 아이콘을 만들었습니다.

 

https://www.canva.com/create/icons/

 

저처럼 직접 만들어도 괜찮고 

 

 

어딘가 있는 것을 가져와도 괜찮습니다.

 

그리고 생성한 아이콘을 컴퓨터의 어딘가에 저장해둡니다.

 

(저는 png 파일로 만들어서 저장했습니다.)

 

이제 여기에 들어가서 저장해둔 아이콘을 업로드 합니다.

 

업로드 할 때 반드시 파일 이름을 ic_launcher로 변경한 다음에 업로드 하시길 바랍니다.

 

아니면 다운로드 할 때 ic_launcher로 이름을 바꾼 다음에 다운로드 하시길 바랍니다.

 

https://easyappicon.com/

EasyAppIcon - Create Mobile App Icon

 

그리고 다운로드 버튼을 눌러서 다운로드 합니다.

 

 

대부분의 경우에서는 Adaptive Icon으로 다운로드 하시면됩니다.

 

 

다운로드를 완료한 압축 파일을 열어보면 다음과 같이 각 플랫폼에 맞게 아이콘이 생성되어있는 것을 볼 수 있습니다.

 

 

---

플러터에서 flutter_launcher_icons를 사용해서 앱 아이콘 적용하기

기본적으로 flutter_launcher_icons에 있는 가이드 라인을 따라가지만

 

적혀있지 않은 중요한 내용도 있기 때문에 제 포스트와 공식 페이지 둘 다 보는 것을 추천합니다.

 

https://pub.dev/packages/flutter_launcher_icons

flutter_launcher_icons | Dart package

 

(달라진 점이 있다면 댓글 남겨주시면 수정하겠습니다.)

 

다음 커맨드를 플러터의 루트 디렉토리에서 실행합니다.

 

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"

 

이제 이를 다음과 같이 바꿉니다.

 

# flutter pub run flutter_launcher_icons
flutter_launcher_icons:
  image_path: "assets/images/ic_launcher.png"

  android: true
  # 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, windows 부분 같은 것은 전부 삭제해도 문제 없습니다.

 

image_path는 실제로 플러터의 앱 아이콘으로 사용할 곳의 그림 파일이 있는 경로로 바꿔줍니다.

 

android: true은 기존의 아이콘 이름과 새로운 아이콘 이름이 동일하니 덮어쓰겠다는 의미입니다. (위에서 아이콘 이름을 ic_launcher로 설정한 이유가 바로 이겁니다.)

 

ios: true: 위 android: true와 동일합니다.

 

자세한 설명은 공식 가이드 라인의 이 부분을 참조 하시길 바랍니다.

 

---

생성한 앱 아이콘을 플러터 프로젝트 안에 넣어주기

이제 아까 생성한 앱 아이콘을 플러터 프로젝트 안에 넣어줍니다.

 

위치와 앱 아이콘의 이름은 위에서 정의한 "assets/images/launcher_icon.png"로 해줘야합니다.

 

즉, 다음과 같이 넣으면됩니다.

 

 

---

 

flutter_launcher_icons의 커맨드를 사용해서 자동으로 앱 아이콘 파일 만들기

다음과 같은 커맨드를 플러터의 루트 디렉토리에서 실시합니다.

 

dart run flutter_launcher_icons

 

그럼 다음과 같이 성공 메시지를 볼 수 있고

 

 

여러 파일들이 생성된 것을 확인할 수 있습니다.

 

 

---

부족한 플러터 앱 아이콘 넣어주기

flutter_launcher_icons의 가이드 라인에는 여기까지만 되어있지만...

 

실제로는 여기까지만 하면 제대로 동작하지 않을 가능성이 있습니다.

 

저 같은 경우에는 여기까지만 하면 새롭게 넣은 앱 아이콘이 제대로 나오지 않고

 

그냥 검은색 앱 아이콘이 나왔으며 이는 에러에 의해 발생한 것이었습니다.

 

이는 아래의 커맨드를 사용해서 그림 파일을 자동으로 생성할 때 

 

dart run flutter_launcher_icons

 

일부 그림 파일들이 생성되지 않아서 생기는 문제입니다.

 

위에서 우리가 다운로드 했던

 

https://easyappicon.com/

EasyAppIcon - Create Mobile App Icon

 

앱 아이콘 파일들을 사용해서 이를 해결할 수 있습니다.

 

먼저 새롭게 생성된 Android 관련 아이콘들이 있는 폴더를 전부 확인합니다.

 

 

해당 파일과 다운로드한 파일을 비교해서 부족한 부분을 전부 넣어줍니다.

 

특히 mipmap-anydip-v26/launcher_icon.xml을 확인해서 비어있다면 해당 파일도 교체해줍니다.

 

또한 values/ic_launcher_background.xml도 자동으로 생성되지 않기 때문에 똑같은 위치에 넣어줍니다.

 

 

그리고 기존의 앱을 삭제한 다음 실행합니다.

 

그럼 다음과 같이 설정한 아이콘으로 앱이 설치되는 것을 볼 수 있습니다.