[flutter] 앱 실행 시 Splash 만들기 (flutter_native_splash)

플러터(Flutter) 앱 개발 시 사용자의 첫 인상을 결정짓는 중요한 부분 중 하나가 바로 시작 화면, 즉 Splash 화면입니다. Flutter에서는 `flutter_native_splash` 플러그인을 사용하여 간단하게 멋진 시작 화면을 구현할 수 있습니다. 이 글에서는 `flutter_native_splash` 플러그인의 설정 방법과 사용법에 대해 자세히 알아보겠습니다.

 

 

1. flutter_native_splash 플러그인 소개

flutter_native_splash는 Flutter 앱의 기본 흰색 시작 화면을 사용자 정의 배경색이나 이미지로 바꿀 수 있게 해주는 Flutter 플러그인입니다.

flutter_native_splash | Flutter package

이를 통해 앱의 브랜드나 디자인에 맞는 시작 화면을 손쉽게 만들 수 있습니다.

이미지 출처 https://pub.dev/packages/flutter_native_splash

 

설정 방법

1. pubspec.yaml 파일 수정

먼저, pubspec.yaml 파일 내 dev_dependencies 섹션에 flutter_native_splash 플러그인을 추가합니다.

dev_dependencies:
  flutter_native_splash: ^1.1.7+1

추가한 후, 터미널에서 flutter pub get 명령어를 실행하여 플러그인을 프로젝트에 포함시킵니다.

 

2. splash 화면 설정

pubspec.yaml 파일의 하단에 flutter_native_splash의 설정을 추가합니다.

필수적으로 설정해야 하는 것은 배경색(color) 또는 배경 이미지(background_image)입니다.

둘 중 하나만 설정할 수 있으며, 동시에 설정할 수는 없습니다.

flutter_native_splash:
  color: "#42a5f5"
  #background_image: "assets/background.png"
  #image: "assets/splash.png"

배경색은 앱의 메인 색상과 일치시킬 수 있으며, image를 통해 스플래시 이미지를 추가할 수 있습니다. 단, 이미지 경로에는 따옴표를 사용하지 않는 것에 주의해야 합니다.

 

3. 스플래시 화면 적용 및 제거

• 적용: 설정이 완료되면, 터미널에서 다음 명령어를 실행하여 스플래시 화면을 생성합니다.

flutter pub run flutter_native_splash:create

• 제거: 스플래시 화면을 제거하려면, 다음 명령어를 실행합니다.

flutter pub run flutter_native_splash:remove

이미지나 설정을 변경하고 싶을 때는, 먼저 remove 명령어로 현재 스플래시 화면을 제거한 후, 변경사항을 적용하고 create 명령어로 다시 생성해야 합니다.

 

4. 전체소스

스플래쉬와 관련된 pubspec.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.  
  #image: assets/splash.png

  # The color_dark, background_image_dark, and image_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

  # 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

  # 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

  # To hide the notification bar, use the fullscreen parameter.  Has no affect 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'

 

결론

flutter_native_splash 플러그인을 사용하면 Flutter 앱에 매력적인 시작 화면을 손쉽게 추가할 수 있습니다.

사용자의 첫 인상을 결정짓는 중요한 요소인 만큼, 앱의 전체적인 디자인과 조화를 이루는 스플래쉬 화면을 구성해 보세요.