[Flutter] flutter_native_splash 라이브러리를 이용한 splash screen 만들기

앱을 실행하면 잠시동안 앱의 로고를 보여주는 화면이 있습니다.
이를 Splash Screen 이라고 하는데 flutter_native_splash 라이브러리를 이용하여 만드는 방법에 대해 알아보고자 합니다.

Splash 이미지를 준비합니다.

라이브러리를 설치합니다.

pubspec.yaml 에 아래의 라이브러리를 추가 한 후, flutter pub get 을 실행합니다.

...
dependencies:
  flutter_native_splash: ^2.2.4
...

Splash Screen 세팅하기

다음의 yaml 코드를 pubspec.yaml 파일에 추가하거나, Root 프로젝트 폴더에 flutter_native_splash.yaml 이라는 새 파일에 작성합니다.

flutter_native_splash:
  color: "#ffffff"
  #background_image: "assets/background.png"
  #image: assets/splash.png
  #branding: assets/dart.png
  #branding_mode: bottom
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png
  #branding_dark: assets/dart_dark.png
  android_12:
    #image: assets/android12splash.png
    #color: "#42a5f5"
    #icon_background_color: "#111111"
    #branding: assets/dart.png
    #image_dark: assets/android12splash-invert.png
    #color_dark: "#042a49"
    #icon_background_color_dark: "#eeeeee"
  #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: assets/splash-android.png
  #image_dark_android: assets/splash-invert-android.png
  #image_ios: assets/splash-ios.png
  #image_dark_ios: assets/splash-invert-ios.png
  #image_web: assets/splash-web.gif
  #image_dark_web: assets/splash-invert-web.gif
  #background_image_android: "assets/background-android.png"
  #background_image_dark_android: "assets/dark-background-android.png"
  #background_image_ios: "assets/background-ios.png"
  #background_image_dark_ios: "assets/dark-background-ios.png"
  #background_image_web: "assets/background-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.gif
  #branding_dark_ios: assets/dart_dark-ios.gif

  # 스플래시 이미지의 위치는 android_gravity, ios_content_mode, web_image_mode 파라미터로 설정할 수 있으며, Default 값은 center 입니다.
  #android_gravity: center
  #ios_content_mode: center
  #web_image_mode: center

  # 화면 방향은 android_screen_orientation 파라미터를 사용하여 android 에서 설정할 수 있습니다. [https://developer.android.com/guide/topics/manifest/activity-element#screen](https://developer.android.com/guide/topics/manifest/activity-element#screen)
  #android_screen_orientation: sensorLandscape

  # 알림 표시줄을 숨기려면 fullscreen 파라미터를 사용합니다. 웹에 알림 표시줄이 없기 때문에 웹에 영향을 미치지 않습니다. 기본값은 false 입니다. Android와 달리 iOS는 앱이 로드될 때 알림 표시줄을 자동으로 표시하지 않습니다. 알림표시줄을 표시하려면 flutter 앱에 다음 코드를 추가하면 됩니다.
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom, SystemUiOverlay.top], );
  #fullscreen: true

  # info.plist 파일 이름을 변경한 경우 info_plist_files 매개 변수로 파일 이름을 지정할 수 있습니다.
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

• color: 백그라운드 컬러
• background_image: 백그라운드 이미지
• color 나 background_image 중 하나는 필수 파라미터입니다.
• branding 속성을 사용하면 시작 화면에서 브랜딩으로 사용되는 이미지를 지정할 수 있습니다.
• brandig_mode 는 브랜딩 이미지를 화면 하단에 배치하는 속성입니다. 속성값으로는 bottomLeft, bottom, bottomRight 가 있고, default 값은 bottom 입니다.
• color_dark, background_image_dark, image_dark, branding_dark 는 장치가 Dark 모드일 때 배경과 이미지를 설정하는 파라미터입니다.
• Android 12에서는 이전 버전과 다르게 스플래시 화면을 처리합니다. 스플래시 화면 을 참고하세요.
• android, ios, web 파라미터를 이용하여 지정된 플랫폼에서 스플래시 화면 생성을 비활성화 할 수 있습니다.

패키지를 실행합니다.

세팅을 추가한 후에 아래의 명령어를 터미널에서 실행해주세요.

$ flutter pub run flutter_native_splash:create --path=./flutter_native_splash.yaml

삭제하는 방법도 있습니다.

$ flutter pub run flutter_native_splash:remove

앱 초기화 설정

기본적으로 flutter 가 첫 번째 프레임을 그릴 때 스플래시 화면이 제거됩니다. 앱이 초기화되는 동안 스플래시 화면을 그대로 유지하려면 preserve() 와 remove() 메소드를 함께 사용하면 됩니다. 화면에 스플래시를 유지하려면 WidgetsFlutterBinding.ensureInitialized() 에서 반환된 값을 preserve() 메서드에 전달합니다. 나중에 앱이 초기화되면 remove() 호출하여 스플래시 화면을 제거하세요.

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

// whenever your initialization is completed, remove the splash screen:
    FlutterNativeSplash.remove();

NOTE: preserve() 와 remove() 메소드를 사용할 필요가 없다면, pubspec.yaml 의 dev_dependencies 에 flutter_native_splash 를 작성할 수 있습니다.

Flavor

여러 개의 버전이나 환경으로 구성된 프로젝트일 경우, flavor 를 지원합니다. 만약, devlopment 와 production 2개의 환경이 있다면, flutter_native_splash-{flavor}.yaml 형태의 파일을 각각 생성하여 설정을 개별로 작성합니다.

# flutter_native_splash-development.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-development.png
  branding: assets/branding-development.png
  color_dark: "#121212"
  image_dark: assets/logo-development.png
  branding_dark: assets/branding-development.png

  android_12:
    image: assets/logo-development.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-development.png
    icon_background_color_dark: "#121212"

  web: false

# flutter_native_splash-production.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-production.png
  branding: assets/branding-production.png
  color_dark: "#121212"
  image_dark: assets/logo-production.png
  branding_dark: assets/branding-production.png

  android_12:
    image: assets/logo-production.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-production.png
    icon_background_color_dark: "#121212"

  web: false

단일 버전만 생성하려는 경우에는 다음과 같은 명령어를 터미널에서 실행합니다.

$ flutter pub run flutter_native_splash:create --flavor [flavor]

다음과 같이 하나의 명령으로 모든 flavor를 지정할 수도 있습니다.

$ flutter pub run flutter_native_splash:create --flavors development,production

android 설정

android 는 이것으로 설정이 끝났습니다.

iOS 설정

iOS는 다음의 설정들을 실행해야 합니다.

Assumption

이 설정이 작동하려면, schemes 이 설정해야 합니다.

준비

• XCode 에서 iOS Flutter 프로젝트를 열기
• {project root}/ios/Runner/Base.lproj 위치 참고
• 모두 선택하고 현재 LaunchScreen.storyboard 가 이미 있는 왼쪽에 직접 Xcode로 끌어서 놓습니다.
• 파일을 거기에 놓으면 Xcode 에서 파일을 연결하라는 메시지가 표시됩니다. 'Copy if needed'를 선택했는지 확인.
• 이 부분이 완료되었습니다. 프로젝트에 새로 생성된 스토리보드를 연결했습니다.

xCode

Xcode 는 여전히 이를 사용하는 방법을 모르기 때문에 모든 현재 flavor(shemes)에 대해 사용할 파일을 지정하고, info.plist 파일 내에서 해당 값을 사용해야 합니다.

• Xcode 에서 iOS Flutter 프로젝트를 엽니다. (Runner.xcworkspace 열기)
• 왼쪽 상단 모서리에 있는 Runner 프로젝트 (일반적으로 목록의 첫번째 항목)를 클릭합니다.
• 화면 중앙 왼쪽에서 Runner target을 선택해주세요.
• 화면 상단에서 빌드 설정을 선택하세요.
• 'All' 과 'Combined' 가 선택되어 있는지 확인하세요.
• 'Combined' 옆에 '+' 버튼이 있습니다. 이 버튼을 누르고 '사용자 정의 설정 추가'를 선택하세요.
• 그렇게 하면 Xcode는 사용자가 이름을 지정할 수 있는 새 변수를 생성합니다. 이름을 LAUNCH_SCREEN_STORYBOARD로 지정하는 것을 추천합니다.
• 그렇게 하면 프로젝트에서 정의한 각 버전 flavor(schemes)에 대해 특정 이름을 정의할 수 있는 옵션이 제공됩니다. 이 도구로 생성된 LaunchScreen.storyboard의 정확한 이름을 입력했는지 확인하세요.
  • 예: flavor development가 있는 경우, LaunchScreenDevelopment.storyboard 라는 이름으로 생성된 스토리보드가 있습니다. 스토리보드 부분 없이 해당 이름을 flavor 값 옆의 변수에 추가해주세요.
• 작업을 마친 후에는 info.plist 파일을 업데이트 하여 새로 생성된 변수를 연결하여 올바르게 사용되도록 해야 합니다.
• info.plist 파일 열기
• 'Launch screen interface file base name' 항목을 찾습니다.
• 기본값은 'LaunchScreen' 이며, 이전에 생성한 변수 이름으로 변경합니다. 이 단계를 정확하게 따라하면 LAUNCH_SCREEN_STOYBOARD 가 되므로 $(LAUNCH_SCREEN_STOYBOARD) 를 입력하세요.
• 이제 모두 완료되었습니다.

자세한 사항은 여기 를 참고하세요.