[Flutter] OS 또는 장치에 적용된 컴퓨터를 생성하는 명령 [fluter launcher icons]

개시하다

앱을 만들 때 꼭 만들어야 하는 앱은 아이콘 이미지를 만드는 것은 좋지만 OS와 디바이스 해상도에 맞게 다양한 크기의 이미지로 변환해야 해 번거롭다.
Flutter에는 다양한 크기의 Applian con으로 자동 변환할 수 있는 패키지flutter_launcher_icons가 있는데, 이런 가져오기 방법을 소개한다.
https://pub.dev/packages/flutter_launcher_icons

컨디션

Flutter 2.10.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 7e9793dee1 (4 weeks ago) • 2022-03-02 11:23:12 -0600
Engine • revision bd539267b4
Tools • Dart 2.16.1 • DevTools 2.9.2

두 가지 아이콘 이미지 준비

아이콘 이미지의 크기와 종류가 특별히 지정되지 않았습니다.사이즈는 512×512 정도면 충분하죠.
이번에는 아래의 그림을 준비했다.그림이 icon8에서 다운로드되었습니다.

icon.png
배경색 있음#ffffff안드로이드 8 이상사용자 정의 아이콘이라 불리며 장치 모델에 따라 다양한 아이콘의 그래픽을 표시할 수 있기 때문에 배경을 통해 약 50% 축소된 이미지도 준비했다.이번 이미지의 축소는 PEKO-STEP를 이용했다.
Adaptive 아이콘을 지원하지 않을 수도 있지만 Android 터미널의 아이콘이 끊어지기 때문에 반드시 대응해야 합니다.

icon_adaptive_foreground.png
배경 투명도 약 50% 감소
아래에 각각 저장합니다.

.
└── assets
    └── images
        ├── icon.png
        └── icon_adaptive_foreground.png

pubspec.편집

pubspec.yaml

  dev_dependencies:
+   flutter_launcher_icons: ^0.9.2

+ flutter_icons:
+   android: true
+   ios: true
+   image_path: 'assets/images/icon.png'
+   adaptive_icon_background: '#ffffff'
+   adaptive_icon_foreground: 'assets/images/icon_adaptive_foreground.png'

^0.9.2의 섹션을 지정하십시오최신 버전.image_path의 아이콘 이미지는 iOS 및 안드로이드 8 이하에 적용됩니다.adaptive_icon_background는 안드로이드의 사용자 적응 아이콘의 배경색입니다.원하는 색상을 지정하십시오.

명령을 실행하여 아이콘 이미지 생성

터미널에서 다음 명령을 실행하여 아이콘 이미지를 생성합니다.

flutter pub get
flutter pub run flutter_launcher_icons:main

동작 확인

OS를 구축하고 실행합니다.안드로이드랑 iOS 느낌이 다 좋아요!빈 부분과 배경색을 좋아하는 느낌으로 조정하세요.
Pixel 5 (Android 12)
iPhone 12 Pro (iOS 15.4)




참고로 icon.png의 배경을 투명하게 하면 iOS의 배경이 검은색으로 변하고 안드로이드와 외관이 달라질 수 있으니 주의하세요.

Android 및 iOS를 사용하여 다른 아이콘 이미지 지정하기

다음과 같이 개별적으로 지정할 수 있습니다.
pubspec.yaml

  flutter_icons:
    android: true
    ios: true
-   image_path: 'assets/images/icon.png'
+   image_path_android: 'assets/images/icon_android.png'
+   image_path_ios: 'assets/images/icon_ios.png'
    adaptive_icon_background: '#ffffff'
    adaptive_icon_foreground: 'assets/images/icon_adaptive_foreground.png'

개발 환경과 공식 환경에서 다른 아이콘 이미지를 지정하고 싶습니다

루트 디렉터리에 환경별로 flutter_launcher_icons-<flavor>.yaml 만들고 pubspec.yaml 의 flutter_icons 구역에 쓴 내용을 옮겨 씁니다.
flutter_launcher_icons-dev.yaml(개발 환경용)

flutter_icons:
  android: true
  ios: true
  image_path: 'assets/images/icon_dev.png'
  adaptive_icon_background: '#ffffff'
  adaptive_icon_foreground: 'assets/images/icon_adaptive_foreground_dev.png'

flutter_launcher_icons-Prood.yaml(공식 환경용)

flutter_icons:
  android: true
  ios: true
  image_path: 'assets/images/icon_prod.png'
  adaptive_icon_background: '#ffffff'
  adaptive_icon_foreground: 'assets/images/icon_adaptive_foreground_prod.png'

이미지 생성 명령을 실행하는 중 오류 발생

명령을 실행하는 동안 다음 오류가 발생할 수 있습니다.

Unhandled exception:
FormatException: Invalid number (at character 1)

^

#0      int._handleFormatError (dart:core-patch/integers_patch.dart:129:7)
#1      int.parse (dart:core-patch/integers_patch.dart:55:14)
#2      minSdk (package:flutter_launcher_icons/android.dart:309:18)
#3      createIconsFromConfig (package:flutter_launcher_icons/main.dart:94:47)
#4      createIconsFromArguments (package:flutter_launcher_icons/main.dart:60:7)
#5      main (file:///Users/susa/Develop/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_launcher_icons-0.9.2/bin/main.dart:6:26)
#6      _delayEntrypointInvocation.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:295:32)
#7      _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:192:12)
pub finished with exit code 255

이 경우 다음과 같이 수정android/app/build.gradle하면 해결할 수 있습니다.minSdkVersion와 targetSdkVersion의 값은 원하는 값을 선택하십시오.

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "jp.keyber.flutter_launcher_icons_sample"
-        minSdkVersion flutter.minSdkVersion
-        targetSdkVersion flutter.targetSdkVersion
+        minSdkVersion 26
+        targetSdkVersion 31
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }