PromleeBlog
sitemapaboutMe

posting thumbnail
플러터 앱 스플래시 화면 추가하기 (flutter_native_splash)
Add a splash screen to your Flutter app (flutter_native_splash)

📅

🚀

들어가기 전에🔗

이 포스팅은 flutter_native_splash 2.4.5 버전을 기준으로 작성되었습니다.
기본적인 플러터 프로젝트가 생성되어 있다는 가정 하에 작성되었습니다.

스플래시 화면이란?🔗

스플래시 화면은
앱을 시작할 때 사용자에게 표시되는 화면
입니다. 스플래시 화면은 앱이 로드되는 동안 사용자에게 앱이 로드 중임을 알려주는 역할을 합니다.
앱을 열면 네이티브 앱이 Flutter를 로드하는 동안 잠시 시간이 걸립니다. 기본적으로 이 시간 동안 네이티브 앱은 흰색 스플래시 화면을 표시합니다.
이 패키지는 이 기본 스플래시 화면 배경색과 스플래시 이미지를 커스터마이징하기 위한 iOS, Android 및 웹 네이티브 코드를 자동으로 생성합니다. 다크 모드, 전체 화면 및 플랫폼별 옵션을 지원합니다.

🚀

1. 패키지 설치🔗

프로젝트 루트 폴더에서 다음 명령어를 통해 패키지를 설치합니다.
flutter pub add flutter_native_splash
pubspec.yaml 파일에 다음 코드가 추가되었는지 확인합니다.
dependencies:
  flutter_native_splash: ^2.4.5 # 패키지 버전

🚀

2. yaml 파일 작성🔗

프로젝트의 루트 폴더에 flutter_native_splash.yaml 파일을 생성합니다. 다음 명령어를 통해 생성해도 되고, 직접 파일을 생성해도 됩니다.
touch flutter_native_splash.yaml
해당 파일에 다음 코드를 붙여넣습니다. 주석처리한 부분은 생략해도 되지만 나중에 필요할 수 있는 설명이 적혀 있으니 참고하시면 좋을 것 같습니다.
flutter_native_splash.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:
  # dart run flutter_native_splash:create
  # To restore Flutter's default white splash screen, run the following command in the terminal:
  # dart run flutter_native_splash:remove
 
  # IMPORTANT NOTE: These parameter do not affect the configuration of Android 12 and later, which
  # handle splash screens differently that prior versions of Android.  Android 12 and later must be
  # configured specifically in the android_12 section below.
 
  # 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
 
  # Set the branding padding from the bottom of the screen.  The default value is 0
  # (Not supported on web yet)
  # branding_bottom_padding: 24
 
  # 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 there is no parameter above, the app will use the light mode values.
  # 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
 
  # From Android 12 onwards, the splash screen is handled differently than in previous versions.
  # Please visit https://developer.android.com/guide/topics/ui/splash-screen
  # Following are specific parameters for Android 12+.
  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.  To fit a 1152x1152 image within a circle with a 768 diameter, simply
    # ensure that the most important design elements of your image are placed within a circular area
    # with a 768 diameter at the center of the 1152x1152 canvas.
    #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.  If there is no parameter above, the app will use the light mode values.
    #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 parameter.  You may specify all, selected, or none of these parameters:
  #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_bottom_padding_android: 24
  #branding_dark_android: assets/dart_dark-android.png
  #branding_ios: assets/brand-ios.png
  #branding_bottom_padding_ios: 24
  #branding_dark_ios: assets/dart_dark-ios.png
  #branding_web: assets/brand-web.gif
  #branding_dark_web: assets/dart_dark-web.gif
 
  # 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 can be combined using the | operator to achieve multiple effects.
  # For example:
  # `android_gravity: fill|clip_vertical` - This will fill the width while maintaining the image's vertical aspect ratio
  #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.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [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'
필자의 아이콘 위치입니다.
📦assets
┣ 📂fonts
┣ 📂icons
┣ 📂images
┣ 📂logo
┃ ┗ 📜playstore-icon.png
┗ 📂translations
코드를 붙여넣은 후, 간단하게 splash 배경색과 이미지 파일을 지정해주도록 하겠습니다. 안드로이드 12부터 스플래시의 형태가 바뀌어 안드로이드 12 이상에서는 스플래시 화면을 별도로 지정해주어야 합니다. 참고
지금부터는 주석을 제거하고 스플래시 화면을 지정해주도록 하겠습니다.
flutter_native_splash.yaml
flutter_native_splash:
	color: "#ffffff"
	image: "assets/logo/playstore-icon.png"
	android_12:
		image: "assets/logo/playstore-icon.png"
		color: "#ffffff"

🚀

3. 스플래시 화면 생성🔗

프로젝트 루트 폴더에서 다음 명령어를 통해 스플래시 화면을 생성합니다.
dart run flutter_native_splash:create
성공 메시지
성공 메시지
이제 스플래시 화면이 생성되었습니다. 이제 앱을 실행해보면 스플래시 화면이 표시되는 것을 확인할 수 있습니다.

🚀

결론🔗

플러터에서 손쉽게 스플래시 화면을 추가하는 법을 알아보았습니다. 이외에도 다양한 옵션들이 있으니 필요한 분들은 공식 문서를 참고하시면 좋을 것 같습니다.

참고🔗