flutter 간단하게 스플래시 스크린 만들기 (feat. flutter_native_splash)

 

플루터 앱을 개발하다 보면 앱 실행 시 화면이 곧바로 나타나는 것이 아니라 스플래시 화면이 나타나고 앱이 로드되는 시간 동안 사용자에게 정보를 제공할 수 있습니다. 이러한 스플래시 화면을 구현하기 위해 flutter_native_splash 플러그인을 사용할 수 있습니다.

1. flutter_native_splash 플러그인 설치하기

먼저, 터미널을 열고 프로젝트 디렉토리로 이동합니다. 다음 명령을 실행하여 flutter_native_splash 플러그인을 설치합니다.

flutter pub add flutter_native_splash

flutter_native_splash 플러그인은 앱의 스플래시 화면을 구현하기 위해 필요한 기능과 설정을 제공합니다. 이 플러그인을 사용하면 간편하게 스플래시 화면을 구현할 수 있습니다.

 

2. 스플래시 이미지 준비하기

스플래시 화면에 사용할 이미지를 준비합니다. 이미지는 앱의 리소스 폴더에 저장되어야 합니다. 일반적으로 assets/images 폴더에 이미지를 저장하는 것이 좋습니다. 스플래시 이미지는 앱의 로고나 앱 이름을 포함한 디자인으로 구성되어야 합니다. 사용자에게 앱이 로드되는 동안 기다리는 시간 동안 브랜드 아이덴티티를 강조할 수 있습니다.

3. flutter_native_spash.yaml생성

프로젝트 루트폴더에 flutter_native_spash.yaml파일을 생성합니다.

그리고 아래 글을 첨부합니다.

flutter_native_splash:
  color: "#ffffff"
  image: asset/images/{Spash Image Name}.png

  #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:
    color: "#ffffff"
    image: asset/images/{Spash Image Name}.png
  # 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 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_dark_android: assets/dart_dark-android.png
  #branding_ios: assets/brand-ios.gif
  #branding_dark_ios: assets/dart_dark-ios.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: 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'

4. 아래 커맨드를 실행

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

 5. 만약 스플래시를 수정해야 한다면 스플래시를 제거한 후에 다시 생성해줘야 합니다.

//수정하는 경우 remove를 해주고 create해줘야 합니다  
flutter pub run flutter_native_splash:remove

 

TIP. 스플래시 화면을 수동으로 풀어줌

=>mmain함수에서
WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

=>풀어주고자 하는 화면에서
FlutterNativeSplash.remove();