flutter_native_splash
自动为 Android 和 iOS 添加启动屏幕生成原生代码。通过特定平台、背景颜色和启动图像进行自定义。
当您的应用程序打开时，在原生应用程序加载 Flutter 的过程中会有短暂的时间。默认情况下，在此期间，原生应用程序会显示一个白色的启动屏幕。这个包会自动为 iOS、Android 和 Web 原生代码生成代码，用于自定义此原生启动屏幕的背景颜色和启动图像。支持暗模式、全屏和特定平台选项。
用法
更喜欢视频教程？请查看 Johannes Milke 的教程。
首先，在您的 pubspec.yaml 文件中将 flutter_native_splash 添加为开发依赖项。它属于 dev_dependencies，因为它是一个命令行工具。
dev_dependencies:
flutter_native_splash: ^1.1.8+4
不要忘记 flutter pub get。
注意
如果您使用的是 Flutter 1.x（无空安全），则必须使用此包的 0.x 版本。
1. 设置启动屏幕
自定义以下设置，并将其添加到您项目的 pubspec.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: "#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.cn/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'
2. 运行包
添加完设置后，在终端运行以下命令
flutter pub run flutter_native_splash:create
当该包运行完成后，您的启动屏幕就准备好了。
推荐
次级启动屏
原生启动屏幕会在原生应用程序加载 Flutter 框架时显示。一旦 Flutter 加载完成，可能仍需要加载资源才能使您的应用程序准备就绪。因此，您应该考虑实现一个 Flutter 启动屏幕，在这些资源加载时显示。这里是一个次级 Flutter 启动屏幕的代码示例，或者使用 pub.dev 上的包。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FutureBuilder(
// Replace the 3 second delay with your initialization code:
future: Future.delayed(Duration(seconds: 3)),
builder: (context, AsyncSnapshot snapshot) {
// Show splash screen while waiting for app resources to load:
if (snapshot.connectionState == ConnectionState.waiting) {
return MaterialApp(home: Splash());
} else {
// Loading is done, return the app:
return MaterialApp(
home: Scaffold(body: Center(child: Text('App loaded'))),
);
}
},
);
}
}
class Splash extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Icon(
Icons.apartment_outlined,
size: MediaQuery.of(context).size.width * 0.785,
),
),
);
}
}
Material 资源
-
如果您想使用 Material 图标作为您的启动图像，请从 (material.io/resources/icons) 下载一个 PNG 格式的图标，适用于 Android。我建议使用刚刚下载的
drawable-xxxhdpi文件夹中的最大图标，以获得更好的效果。 -
Material 颜色可在 material.io/resources/color 中找到
