본문으로 바로가기
  1. Home
  2. Flutter/Package
  3. Flutter native splash screen 라이브러리

Flutter native splash screen 라이브러리

· 댓글개 · Dev_Whale

이번 글은 Splash Image이 어떤 것이고 flutter native splash 라이브러리를 사용하여 iOS, Android 두 개를 어떻게 구현하는지 에 대한 글입니다.


Splash Screen?

"Flutter 공식 홈페이지에서는 앱이 로딩되는 동안에 심플한 초기 경험을 제공합니다"라고 적혀있습니다. 여기에서 말하는 심플한 초기 경험(Simple initial experience)은 여러 내용을 담고 있습니다.

예를 들어, 사용자 입장에서 실행하고 싶은 앱이 맞는지 확인할 수 있는 시간이 될 수 있습니다. 그리고 앱을 제공하는 회사 입장에서는 자신의 회사의 정체성과 사용자에게 첫인상을 보여줄 수 있는 수단이기도 합니다. 이밖에도 개발자 입장에서는 앱이 로딩되는 시간 동안 백엔드 단에서 사용자의 자동 로그인, 인터넷 연결, 권한 확인, 등 앱이 정상적으로 작동하기 위해 사전 준비를 하는 시간을 가질 수 있습니다. 

Android Splash Screen

프로젝트에서 라이브러리 설치만 완료한 상태에서 실행 전과 후를 비교해보았습니다.

Android 11 이하의 버전에서는 흰색 배경만 나옵니다. 아래의 사진은 12 이상 버전입니다.

적용 전 / 적용 후

iOS Splash Screen

프로젝트에서 라이브러리 설치만 완료한 상태에서 실행 전과 후를 비교해보았습니다.

적용 전 / 적용 후


Splash Screen 세팅 과정

1. 설치

pubspec.yaml 파일에서 라이브러리를 추가해줍니다.

그리고 flutter pub get 명령어를 실행시켜 줍니다.

dependencies:
  flutter_native_splash: ^2.2.10+1

2. Splash Screen 세팅

코드 블록을 복사해서 pubspec.yaml 파일에 붙여 넣거나 프로젝트 폴더에(pubspec.yaml와 같이 있는 폴더) flutter_native_splash.yaml 이름으로 파일을 생성해주고 코드 블록을 붙여 넣기 하셔도 됩니다.

코드 길이가 많아 "접은 글"로 코드를 첨부하였습니다.

더보기
flutter_native_splash:
  # This package generates native code to customize Flutter's default white native splash screen
  # with background color and splash image.
  # Customize the parameters below, and run the following command in the terminal:
  # flutter pub run flutter_native_splash:create
  # To restore Flutter's default white splash screen, run the following command in the terminal:
  # flutter pub run flutter_native_splash:remove

  # color or background_image is the only required parameter.  Use color to set the background
  # of your splash screen to a solid color.  Use background_image to set the background of your
  # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
  # size of the app. Only one parameter can be used, color and background_image cannot both be set.
  color: "#42a5f5"
  #background_image: "assets/background.png"

  # Optional parameters are listed below.  To enable a parameter, uncomment the line by removing
  # the leading # character.

  # The image parameter allows you to specify an image used in the splash screen.  It must be a
  # png file and should be sized for 4x pixel density.
  #image: assets/splash.png

  # The branding property allows you to specify an image used as branding in the splash screen.
  # It must be a png file. It is supported for Android, iOS and the Web.  For Android 12,
  # see the Android 12 section below.
  #branding: assets/dart.png

  # To position the branding image at the bottom of the screen you can use bottom, bottomRight,
  # and bottomLeft. The default values is bottom if not specified or specified something else.
  #branding_mode: bottom

  # The color_dark, background_image_dark, image_dark, branding_dark are parameters that set the background
  # and image when the device is in dark mode. If they are not specified, the app will use the
  # parameters from above. If the image_dark parameter is specified, color_dark or
  # background_image_dark must be specified.  color_dark and background_image_dark cannot both be
  # 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 handles the splash screen differently than previous versions.  Please visit
  # https://developer.android.com/guide/topics/ui/splash-screen
  # Following are Android 12 specific parameter.
  android_12:
    # The image parameter sets the splash screen icon image.  If this parameter is not specified,
    # the app's launcher icon will be used instead.
    # Please note that the splash screen will be clipped to a circle on the center of the screen.
    # App icon with an icon background: This should be 960×960 pixels, and fit within a circle
    # 640 pixels in diameter.
    # App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
    # 768 pixels in diameter.
    #image: assets/android12splash.png

    # Splash screen background color.
    #color: "#42a5f5"

    # App icon background color.
    #icon_background_color: "#111111"

    # The branding property allows you to specify an image used as branding in the splash screen.
    #branding: assets/dart.png

    # The image_dark, color_dark, icon_background_color_dark, and branding_dark set values that
    # apply when the device is in dark mode. If they are not specified, the app will use the
    # parameters from above.
    #image_dark: assets/android12splash-invert.png
    #color_dark: "#042a49"
    #icon_background_color_dark: "#eeeeee"

  # The android, ios and web parameters can be used to disable generating a splash screen on a given
  # platform.
  #android: false
  #ios: false
  #web: false

  # Platform specific images can be specified with the following parameters, which will override
  # the respective image parameter.  You may specify all, selected, or none of these parameters:
  #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.png
  #image_dark_web: assets/splash-invert-web.png
  #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.png
  #branding_dark_ios: assets/dart_dark-ios.png

  # The position of the splash image can be set with android_gravity, ios_content_mode, and
  # web_image_mode parameters.  All default to center.
  #
  # android_gravity can be one of the following Android Gravity (see
  # https://developer.android.com/reference/android/view/Gravity): bottom, center,
  # center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal,
  # fill_vertical, left, right, start, or top.
  #android_gravity: center
  #
  # ios_content_mode can be one of the following iOS UIView.ContentMode (see
  # https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill,
  # scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight,
  # bottomLeft, or bottomRight.
  #ios_content_mode: center
  #
  # web_image_mode can be one of the following modes: center, contain, stretch, and cover.
  #web_image_mode: center

  # The screen orientation can be set in Android with the android_screen_orientation parameter.
  # Valid parameters can be found here:
  # https://developer.android.com/guide/topics/manifest/activity-element#screen
  #android_screen_orientation: sensorLandscape

  # To hide the notification bar, use the fullscreen parameter.  Has no effect in web since web
  # has no notification bar.  Defaults to false.
  # NOTE: Unlike Android, iOS will not automatically show the notification bar when the app loads.
  #       To show the notification bar, add the following code to your Flutter app:
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true

  # If you have changed the name(s) of your info.plist file(s), you can specify the filename(s)
  # with the info_plist_files parameter.  Remove only the # characters in the three lines below,
  # do not remove any spaces:
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

3. 라이브러리 실행하기

세팅이 완료된 후, 아래의 명령어를 터미널에 입력 후 실행해줍니다.

flutter pub run flutter_native_splash:create

루트 폴더(프로젝트 폴더, pubspec.yaml가 있는 폴더)를 제외한 다른 곳에 파일을 만드셨다면 아래의 명령어를 본인에 환경에 맞게 수정하여 입력 후 실행해줍니다.

flutter pub run flutter_native_splash:create --path=path/to/my/file.yaml

4. 앱 이니셜라이저 설정

기본적으로 Flutter에서 첫 프레임을 그리기 시작할 때 Splash Screen은 제거됩니다. 만약 앱이 초기화되는 동안에 Spalsh Screen을 유지하려면 preserve() 또는 remove() 메서드를 같이 사용하면 됩니다.

preserve Method

Splash Screen을 유지하려면 "WidgetsFlutterBinding.ensureInitialized()"의 반환 값을 preserve에 전달해주면 됩니다.

remove Method

앱 초기화가 완료되면 remove 메서드를 통해 Splash Screen을 제거해주면 됩니다.

import 'package:flutter_native_splash/flutter_native_splash.dart';

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

FlutterNativeSplash.remove(); // 초기화가 끝나는 시점에 삽입
주의
preserve, remove 메서드를 사용하기 위해서는 반드시 라이브러리를 설치할 때 dependencies에 설치해주시길 바랍니다.
이전 버전 라이브러리처럼 dev_dependencies에는 메서드가 없습니다.

Android 12 이상 Splash Screen 차이점

안드로이드 12 이상 버전부터 Splash Screen 화면이 변경되었습니다. 아래에 속성에 대한 설명에 자세한 설명을 적어놓았습니다.

안드로이드 11 버전 / 안드로이드 13버전

flutter_native_splash.yaml 설명

flutter_native_splash:
  color: "#008dff"
  background_image: assets/background.png
  image: assets/image.png
  branding: assets/branding.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 이상 버전에서 적용
  android_12:
  icon_background_color: "#111111"
  image_dark: assets/image.png
  color_dark: "#042a49"
  icon_background_color_dark: "#eeeeee"

 

 

  • 필수 매개변수
    • color - 뒷 배경의 색깔을 지정할 수 있습니다.
    • background_image - 뒷 배경의 이미지를 설정할 수 있습니다.
    • color와 background_image는 둘 중 하나만 사용이 가능하며 만약 둘 다 사용했을 경우 color 가 적용됩니다.
  • image - 앱 아이콘 이미지입니다.
  • branding - 안드로이드 11 이하 버전에서는 brading 이미지를 적용하실 수 있습니다. 위에 왼쪽 사진을 보시면 내비게이션 바 바로 위쪽에 초록색 글씨로 "Branding Area"라고 이미지를 만들어 적용시켜 놓았습니다. 이미지의 높이를 수정하시려면 이미지 자체에서 아래쪽에 공백 구간을 만들어 주셔야 합니다.
  • branding_mode - branding 이미지의 위치를 설정할 수 있습니다.
    • 설정 값 - bottom, bottomRight, bottomLeft
  • Android 12 
    • flutter_native_splash: 아래에 적용된 속성과 일부를 공유합니다. 즉, Android 12: 에 color 값을 입력하면 중복된 속성으로 인식하여 사용이 불가능합니다.
    • icon_background_color - 아이콘의 배경의 색깔입니다.
      • 투명 이미지를 사용하지 않을 시 image: 속성에 사용된 이미지 파일로 덮이게 돼서 이 속성을 사용할 때는 배경이 투명인 이미지를 사용하셔야 합니다.

빌드 오류

AndroidManifest.xml 에서 android:icon = "@mipmap/ic_launcher" 를 res 폴더랑 맞지 않는데 빌드 하시면

AAPT:resource error 가 나타납니다.

AndroidManifest.xml 위치
android - app - src - main - AndroidManifest.xml
res 폴더는 AndroidManifest.xml 와 같은 폴더에 있습니다.

iOS Splash Screen

안드로이드 테스트 완료 후 바로 iOS 시뮬레이터로 확인해본 결과 위와 같은 화면이 적용되었습니다. 이제 iOS는 어떻게 수정하는지 알아보도록 하겠습니다.

Xcode 실행

Xcode로 iOS 폴더를 열고 왼쪽 사이드바처럼 Runner -> Runner -> LaunchScreen를 누르시면 iOS 시뮬레이터가 나타나게 되며 마우스 클릭으로 이미지 위치를 수정하실 수 있습니다.

위치를 수정하게 되면 첫 번째 사진과 같이 노란색 선이 생기는데 이미지의 좌표를 수정해주셔야 합니다.

Constraints 아래에 있는 Horizontal과 Vertical에서 수평과 수직 값을 입력해주시고 Android Studio에서 빌드하시면 적용됩니다.

Horizontal 값은 67.5 + ( -158) = -90.5

Vertical 값은 628 + 14 = 642


결론

엄청 편하게 Splash Screen을 구현할 수 있습니다. 하지만 Android 12 이상 버전부터 앱 아이콘 배경 값 적용 가능하며 애니메이션은 적용이 불가능합니다. 네이티브 언어에서는 앱 아이콘 애니메이션을 추가할 수 있지만 Flutter는 불가능한 것 같습니다.

Flutter에서 애니메이션이 들어가 있는 화면을 구현하려면 따로 splash 화면을 구현하셔야 할 것 같습니다.

최근 글
Dev_Whale의 Flutter 블로그
추천하는 글
Dev_Whale의 Flutter 블로그
💬 댓글 개
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.