[flutter] 앱 로딩 화면인 Splash Screen 적용하는 방법

플러터에서 앱 로딩 화면인 Splash Screen 적용하는 방법

앱을 최초 실행할 때 한 번 나타나는 화면인 스플래시 스크린(Splash Screen)을 추가하면 사용자에서 더 좋은 앱 환경을 제공할 수 있습니다.

 

우선 앱의 메인 페이지가 나타나기 전에 필요한 사용자 데이터, 이미지, 폰트 등을 미리 불러올 수 있습니다. 또 잠깐 스쳐가는 화면이지만 그 짧은 사이에 앱의 목적이나 방향성, 슬로건을 사용자에게 지속적으로 제시할 수 있는 작은 마케팅도 가능합니다.

이러한 마케팅은 앱을 처음 다운로드 받아서 이용해 보는 사용자에게 사전에 앱의 전반적인 분위기를 느끼도록 제공할 수 있다고 생각합니다.

개인적인 생각이지만 지속적으로 사용자에게 앱의 슬로건이나 앱이 지향하는 이미지를 보여주다 보면, 언젠가 이미지만 보더라도 "아! 이거 ㅇㅇㅇ앱이잖아"라고 기억될 가능성이 조금은 있다고 생각합니다.

그럼 플러터에서는 어떻게 스플래시 스크린을 적용할 수 있는지 알아보겠습니다. 이번에는 flutter_native_splash 패키지를 이용해서 화면을 구현해보겠습니다.

* 참고로 패키지를 사용하실 때 LIKES, POPULARITY 점수가 높은 패키지를 사용하시기를 권장드립니다.

 

패키지 설치

flutter_native_splash 패키지의 최신 버전을 확인하고, pubspec.yaml 파일의 dependencies 위치에 패키지 버전을 추가하여 설치를 진행합니다. (https://pub.dev/packages/flutter_native_splash)

// pubspec.yaml
dependencies:
  flutter_native_splash: ^2.2.7

 

flutter_native_splash.yaml 파일 생성

앱 프로젝트 루트 경로에 flutter_native_splash.yaml 이름의 새 파일을 생성하고 아래 코드를 추가합니다. 해당 코드는 패키지 사이트에서 확인하실 수 있습니다. 참고로 루트 경로라 함은 pubspec.yaml 파일이 위치한 폴더를 의미합니다.

 

 

패키지 옵션 값은 다음과 같습니다.

- color: 스플래시 스크린의 배경색

- background_image: 스플래시 스크린의 배경 이미지

- image: 스플래시 스크린의 메인 이미지

- color_dark: 다크 모드일 경우의 배경색

- background_image_dart: 다크 모드일 경우의 배경 이미지

- image_dart: 다크 모드일 경우의 메인 이미지

- android_gravity: 안드로이드에서 이미지 위치

- ios_content_mode: ios에서 이미지 위치

- fullscreen: 스플래시 스크린 전체 화면 여부

 

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 < v12, iOS and the Web.
  #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 image_dark parameter and icon_background_color_dark set the image and icon background
    # color 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_andriod: assets/splash-andriod.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_andriod: 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'

 

이미지 파일 추가

Splash Screen에서 사용할 이미지를 assets/splash.png 위치에 저장합니다.

 

Splash Screen 이미지 생성

이제 다음 명령어를 실행하여 스플래시 스크린 이미지를 생성합니다.

flutter pub run flutter_native_splash:create

 

Splash Screen 이미지 수정, 삭제

스플래시 스크린에서 사용 중인 이미지를 수정하거나 삭제하려면, 다음 명령어 실행하여 네이티브에 적용된 파일과 코드를 제거해야 합니다.

flutter pub run flutter_native_splash:remove

 

삭제 후 yaml 파일을 수정하고, 다시 :create 명령어를 실행하면 스플래시 스크린이 변경된 것을 확인하실 수 있습니다.

 

간혹 앱을 실행하고 스플래시가 정상적으로 나타났다가 사라지면서 검은 전체 화면이 나타나는 현상이 발생할 때가 있는데요. 이런 경우는 어떻게 처리하면 되는지 다음 글에서 정리해보겠습니다.

 

그럼 조금이나마 도움이 되었길 바라며, 부족한 글 읽어주셔서 정말 감사합니다~😄