PromleeBlog
sitemap
aboutMe

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
성공 메시지
성공 메시지
이제 스플래시 화면이 생성되었습니다. 이제 앱을 실행해보면 스플래시 화면이 표시되는 것을 확인할 수 있습니다.

결론 🔗

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

참고 🔗