네이티브 단의 기본 시작화면의 배경색, 시작 이미지, 브랜딩 등을 설정하고 정렬할 수 있는 패키지
이 패키지를 사용하면 네이티브단에서의 스플래시 화면을 설정에 맞게 만들어주고 Flutter가 첫 화면의 프레임을 렌더링하기 저까지의 해당 화면이 노출 됨
⚠️ flutter_native_splash를 사용하지 않으면 android와 iOS단에서 바꿔주어야함dependencies:
flutter_native_splash: ^2.0.5
루트 프로젝트 폴더에 생성하면 됨
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());
}