[Flutter] 앱 이름, 아이콘, 스플래시 이미지설정

앱은 어떤앱이던지

기본적으로 아이콘과 스플래시화면을 가진다.

 

안드로이드는 android\app\src\main\res\drawable 안에 이미지파일을 넣고, xml로 설정하며

IOS는 Runner\Assets.xcassets\LaunchImage.imageset , LaunchBackground.imageset 에서 파일을 넣어주고 설정한다.

 

하지만, 이 모든 설정을  건들지 않고 Flutter 라이브러리로 해결할 수 있다.

아이콘과 스플래시 화면을 AOS / IOS 모두 해결해보자

 

1. 아이콘 설정

https://pub.dev/packages/flutter_launcher_icons

아래와 같이 puspec.yaml 에서 flutter_launcher_icons 를  추가하고 설정을 작성해준다. 

dev_dependencies:
  flutter_launcher_icons: "^0.11.0"

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/icon.png"
  min_sdk_android: 21 # android min sdk min:16, default 21
  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 get
flutter pub run flutter_launcher_icons

 

설정후 변경사항이 없다면, 해당 라이브러리와 설정내용을 지워도 무방하다.

아래 스플래시 설정 라이브러리와 호환되지 않는 문제가 있기때문에, 

함께 사용하는 경우 제거해주자.

 

 

 

2. 스플래시 설정

라이브러리 : https://pub.dev/packages/flutter_native_splash

영상 가이드 : https://www.youtube.com/watch?v=dB0dOnc2k10&ab_channel=JohannesMilke

 

아이콘과 마찬가지로 puspec.yaml 에서

flutter_native_splash 를  추가하고 설정을 작성해준다. (다양한 설정은 공식문서 주석을 참고)

flutter_native_splash:
   # 이 패키지는 Flutter의 기본 흰색 기본 스플래시 화면을 사용자 정의하는 기본 코드를 생성합니다.
   # 배경색과 스플래시 이미지.
   ## 생성 / 복원 명령어
   # flutter pub run flutter_native_splash:create
   # Flutter의 기본 흰색 시작 화면을 복원하려면 터미널에서 다음 명령을 실행합니다.
   # flutter pub run flutter_native_splash:remove

   ##  필수 매개변수 color / background_image 
   # 둘 중 하나만 사용할 수 있으며 색상과 background_image를 둘 다 설정할 수 없습니다.
   color: "#42a5f5"
   #background_image: "자산/background.png"

   ## 이후 내용은 선택적 매개변수들 입니다.

   # image 키워드로 스플래시 화면에 사용되는 이미지를 지정할 수 있습니다.
   # png 파일이며 4x 픽셀 밀도에 맞게 크기가 조정되어야 합니다.
   #image: assets/splash.png

   # branding 속성을 사용하면 시작 화면에서 아래에 나오는 브랜딩으로 사용할 이미지를 지정할 수 있습니다.
   # png 파일이어야 합니다. Android, iOS 및 웹에서 지원됩니다. 안드로이드 12의 경우, Android 12 섹션을 참조하세요.
   #branding: assets/dart.png
   # 브랜딩 이미지를 화면 하단에 배치하려면 bottom, bottomRight, 기본값은 bottom입니다.
   #branding_mode: bottom

   # color_dark, background_image_dark, image_dark, branding_dark는 다크모드 설정 변수입니다.
   # A Set.
   #color_dark: "#042a49"
   #background_image_dark: "assets/dark-background.png"
   #image_dark: assets/splash-invert.png
   #branding_dark: assets/dart_dark.png

   # Android 12는 이전 버전과 다르게 시작 화면을 처리합니다. 방문하시기 바랍니다
   # https://developer.android.com/guide/topics/ui/splash-screen
   # 다음은 Android 12 특정 매개변수입니다.
   android_12:
     # 이미지 매개변수는 스플래시 화면 아이콘 이미지를 설정합니다. 이 매개변수를 지정하지 않으면
     # 앱의 런처 아이콘이 대신 사용됩니다.
     # 스플래쉬 화면은 화면 중앙의 원에 잘려서 나오니 참고하세요.
     # 아이콘 배경이 있는 앱 아이콘: 960×960 픽셀이어야 하며 원 안에 맞아야 합니다.
     # 직경 640픽셀.
     # 아이콘 배경이 없는 앱 아이콘: 1152×1152 픽셀이어야 하며 원 안에 맞아야 합니다.
     # 직경 768픽셀.
     #이미지: assets/android12splash.png

     # 스플래시 화면 배경색.
     #color: "#42a5f5"

     # 앱 아이콘 배경색.
     #icon_background_color: "#111111"

     # branding 속성을 사용하면 시작 화면에서 브랜딩으로 사용할 이미지를 지정할 수 있습니다.
     #branding: assets/dart.png

     # image_dark, color_dark, icon_background_color_dark, branding_dark 설정 값은 다크모들에 대해서 설정합니다
     #image_dark: assets/android12splash-invert.png
     #color_dark: "#042a49"
     #icon_background_color_dark: "#AAAAAA"

   ## 플랫폼.
   # android, ios 및 web 매개변수를 사용하여 주어진 스플래시 화면 생성을 비활성화할 수 있습니다.
   #android: false
   #ios: false
   #web: false

   # 플랫폼별로 각각 지정할 수도 있습니다.
   # 각 매개변수. 다음 매개변수를 모두 지정하거나 선택하거나 지정하지 않을 수 있습니다.
   #color_android: "#42a5f5"
   #color_dark_android: "#042a49"
   #color_ios: "#42a5f5"
   #color_dark_ios: "#042a49"
   #color_web: "#42a5f5"
   #color_dark_web: "#042a49"
   #image_android: 자산/splash-android.png
   #image_dark_android: 자산/splash-invert-android.png
   #image_ios: 자산/splash-ios.png
   #image_dark_ios: 자산/splash-invert-ios.png
   #image_web: 자산/splash-web.png
   #image_dark_web: 자산/splash-invert-web.png
   #background_image_android: "자산/배경-android.png"
   #background_image_dark_android: "자산/dark-background-android.png"
   #background_image_ios: "자산/배경-ios.png"
   #background_image_dark_ios: "자산/dark-background-ios.png"
   #background_image_web: "자산/배경-web.png"
   #background_image_dark_web: "assets/dark-background-web.png"
   #branding_android: assets/brand-android.png
   #branding_dark_android: assets/dart_dark-android.png
   #branding_ios: assets/brand-ios.png
   #branding_dark_ios: assets/dart_dark-ios.png

backgrund, image, branding 설정값 위치 참고

그리고나서 해당 프로젝트 터미널에서 아래를 순서대로 실행하면 설정이 완료된다. 

flutter pub run flutter_native_splash:create 

# 수정하거나 변경되는 경우
flutter pub run flutter_native_splash:remove
flutter clean
flutter pub get
flutter pub run flutter_native_splash:create

반드시 수정사항이 있는 경우 remove, clean , get, create  순서로 다시 해주어야 한다. 

 

아래와 같이 main 부분을 설정하면,  스플래시 화면을 원하는 시간만큼 길게 확인해볼 수 있다.

Future main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 초기화 보장
  await Future.delayed(const Duration(seconds: 3)); // 3초 지연
  runApp(const MyApp());
}

 

더이상 아이콘과 스플래시 이미지를 위해

아래와 같은 사이트에서 기기 크기별로 이미지를 제너레이트해서

네이티브 코드를 수정하는 수고로움을 자처할 필요가 없다.

https://www.appicon.co/

App Icon Generator

 

 

 

3. 앱 이름 바꾸기

 안드로이드는 아래 파일에서 andriod:label 속성값을 수정합니다.

android/app/src/main/AndroidManifest.xml 

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.app">
    <application
        android:label="[APP NAME]"
        android:icon="@mipmap/launcher_icon">
    ...
    </application>
</manifest>

 IOS는 아래 파일에서 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>CFBundleDisplayName</key>
    <string>[APP NAME]</string>
    ...
  </dict>
</plist>