[Flutter] flutter_native_splash 사용하기

flutter_native_splash

네이티브 단의 기본 시작화면의 배경색, 시작 이미지, 브랜딩 등을 설정하고 정렬할 수 있는 패키지

이 패키지를 사용하면 네이티브단에서의 스플래시 화면을 설정에 맞게 만들어주고 Flutter가 첫 화면의 프레임을 렌더링하기 저까지의 해당 화면이 노출 됨

⚠️ flutter_native_splash를 사용하지 않으면 android와 iOS단에서 바꿔주어야함

설치

dependencies:
  flutter_native_splash: ^2.0.5

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:
    # 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: "#FFFFFF"
    #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/images/img_logo.png
  
    # This property allows you to specify an image used as branding in the splash screen. It must be
    # a png file. Currently, it is only supported for Android and iOS.
    #branding: assets/dart.png
  
    # Specify your branding image for dark mode.
    #branding_dark: assets/dart_dark.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.
    #
    # Make sure this content mode value should not be similar to android_gravity value and
    # ios_content_mode value.
    #branding_mode: bottom
  
    # 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 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'

패키지 실행

flutter pub run flutter_native_splash:create

설정을 변경했을 때

flutter pub run flutter_native_splash:remove

flutter pub run flutter_native_splash:create

스플래시 화면에서 시간이 걸리는 작업이 필요한 경우

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  **FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);**
  runApp(const MyApp());
}

// whenever your initialization is completed, remove the splash screen:
    FlutterNativeSplash.remove();

• preserve, removeFlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);를 사용하면, Flutter에서 첫 프레임을 렌더링하였더라도 네이티브단의 스플래시화면을 없애지 않는다.

• 유저정보나 로그인 정보 등 앱 시작 시 필요한 정보나 permission을 받아야 할 때, 원하는 행위가 다 끝난 후 FlutterNativeSplash.remove();를 사용하여 스플래시 화면을 없앨 수 있다.

• 적용 예시

  Future main() async {
    WidgetsFlutterBinding.ensureInitialized();
    await Future.delayed(const Duration(seconds: 3));
    FlutterNativeSplash.remove();
    runApp(const MyApp());
  }