「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」。

本文翻译自pub： flutter_native_splash | Flutter Package (flutter-io.cn)

译时版本： flutter_native_splash 2.0.2

当应用打开时，在原生应用加载 Flutter 之前会有一个短暂的时间。默认情况下，在此期间，原生应用会显示一个白屏画面。该包自动生成 iOS 、 Android 和 Web 的原生代码来自定义闪屏画面的背景色和闪屏图像。支持黑暗模式、全屏和平台指定选项。

新内容

现在可以在应用初始化时一直显示闪屏界面！不再需要第二个闪屏界面。只需使用 removeAfter 方法在初始化完成之后移除闪屏界面。查看下面的详细内容。

用法

更想看视频指南？可以看下 Johannes Milke 的指南（油管）。

首先，添加 flutter_native_splash 依赖到 pubspec.yaml 文件中。

dependencies:
  flutter_native_splash: ^2.0.2

别忘了 flutter pub get 。

1. 闪屏界面

自定义下面的设置，然后添加到工程的 pubspec.yaml 文件中，或者在工程文件夹下放置名为 flutter_native_splash.yaml 的新文件。

flutter_native_splash:

  # 该锯生成原生代码来自定义 Flutter 默认白色原生闪屏界面的背景色和闪屏图像。
  # 自定义下面的参数，然后在命令行终端运行下面的命令：
  # flutter pub run flutter_native_splash:create
  # 要恢复为 Flutter 默认的白色闪屏界面，运行下面的命令：
  # flutter pub run flutter_native_splash:remove

  # 只有 color 或 background_image 是必需的参数。使用 color 将闪屏界面的背景设置为单色。
  # 使用 background_image 可将 png 图像设置为闪屏界面的背景。该图像会被拉伸以适应应用大小。
  # color 和 background_image 不能同时设置，只有一个会被使用。 
  color: "#42a5f5"
  #background_image: "assets/background.png"

  # 以下是可选的参数。去掉注释前面的 #可使参数起作用。

  # image 参数允许你指定在闪屏界面使用的图像。它必须是 png 文件，且应该是用于4倍像素密度的大小。
  #image: assets/splash.png

  # 该属性允许你指定图像作为商标在闪屏界面显示。它必须是 png 文件。现在它只支持 Android 和 iOS 。
  #branding: assets/dart.png

  # 为黑暗模式指定商标图像
  #branding_dark: assets/dart_dark.png

  # 要将商标图像放置在界面底部，可以使用 bottom 、 bottomRight 和 bottomLeft 。如果未指定或者指定了其它值，使用默认值 bottom 。
  # 确保该内容模式值与 android_gravity 值 和 ios_content_mode 值不相似。
  #branding_mode: bottom

  # color_dark 、 background_image_dark 和 image_dark 用于设备在黑暗模式时设置背景色和图像。
  # 如果没有指定，应用会使用上面的参数。如果指定了 image_dark ，必须要指定 color_dark 或 background_image_dark 。
  # color_dark 和 background_image_dark 不能同时设置。
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png

  # android 、 ios 和 web 参数可用于不为对应的平台生成闪屏界面。
  #android: false
  #ios: false
  #web: false

  #  可用 android_gravity 、 android_gravity 、 ios_content_mode 和 web_image_mode 来设置闪屏图像的位置。默认是居中。
  #
  # android_gravity 可以是以下 Android Gravity 其中之一 (查看
  # 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 或 top 。
  #android_gravity: center
  #
  # ios_content_mode 可以是以下 iOS UIView.ContentMode 其中之一 (查看
  # https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill 、
  # scaleAspectFit 、 scaleAspectFill 、 center 、 top 、 bottom 、
  # left 、 right 、 topLeft 、 topRight 、 bottomLeft 或  bottomRight 。
  #ios_content_mode: center
  #
  # web_image_mode 可以是以下模式其中之一：center 、 contain 、 stretch 和 cover 。
  #web_image_mode: center

  # 要隐藏通知栏，使用 fullscreen 参数 。在 Web 上不起作为，因为 Web 没有通知栏。默认是 false 。
  # 注意: 不像 Android 、 iOS 当应用加载时不会自动显示通知栏。
  #       要显示通知栏，在 Flutter 应用中添加以下代码：
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true
  
  # 如果改变了 info.plist 的名字，可以使用 info_plist_files 指定对应的文件名。 
  # 只需移除下面三行前面的 # 字符，不要移除任何空格：
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

2. 运行此包

添加设置之后，在命令行终端运行以下命令：

flutter pub run flutter_native_splash:create

当包完成运行后，你的闪屏界面就准备好了。

要指定 YAML 文件的位置，只需在终端命令后添加 --path：

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

3. 准备应用初始化（可选）

默认，闪屏界面在首次绘制 Flutter 时会被移除。如果想要在应用初始化时保持闪屏界面，可以如下使用 removeAfter 方法：

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  FlutterNativeSplash.removeAfter(initialization);
  // runApp 会运行，但是在初始化完成前不会显示：
  runApp(const MyApp());
}

void initialization(BuildContext context) async {
  // 这里可以在闪屏界面显示时初始化应用所需的资源。
  // 该函数完成后，闪屏界面会被移除。
}

注意: 为了使用此方法， flutter_native_splash 必须在 pubspec.yaml 的 dependencies 部分里，而不是在 dev_dependencies 里。之前的版本是在推后者里。

4. 支持此包 (可选)

如果你觉得该包有用，可以在本页（原链接）最上面点个赞。这里还有支持该包的另外一个选项：

支持Android 12

Android 12 有一个添加闪屏界面的新方法，它由一个窗口背景、图标和图标背景构成。现在，该包支持设置背景色和应用启动用的图标。

如果使支持 Android 12 可用，该包会在 values-v31 和 values-night-v31 资源文件夹下添加一个 styles.xml 文件，当需要为以前的 Android 版本维护旧的闪屏界面时，它会提供 Android 12 的支持。

注意: 从 Android Studio 启动应用时，闪屏界面可能不会出现。尽管如此，从 Android 上点击加载图标启动应用时它会出现。

常见问题

遇到这样的错误 "A splash screen was provided to Flutter, but this is deprecated."

该信息和此包没有关系，它和 Flutter 2.5 如何处理闪屏界面的一个改动 change 有关。这是由下面列出的 AndroidManifest.xml 中的代码导致，这在之前版本的 Flutter 中是默认包含的：

<meta-data
 android:name="io.flutter.embedding.android.SplashScreenDrawable"
 android:resource="@drawable/launch_background"
 />

解决方案是移除上面的代码。注意这也会移除闪屏界面和应用界面之间的渐变效果。

是否支持动画/lottie/GIF图像

现在还不支持。欢迎 PR 。

遇到了这样的错误 AAPT: error: style attribute 'android:attr/windowSplashScreenBackground' not found

该属性只在 Android 12 能找到，所以如果遇到了这个错误，这意味着你的工程没有完全为 Android 12 设置好。你已经更新应用的编译配置了吗？

在 iOS 上看到了错误的闪屏界面。

这是由 iOS 闪屏缓存 bug 导致的，可以卸载应用、关机重启，然后尝试重新安装来解决。

在闪屏界面和应用界面之间看到了白色界面

可能是由 iOS 闪屏缓存 bug 导致的，可以通过卸载应用、关机重启，然后重新安装来解决。
可能是由应用初始化的延迟导致的。要解决这个问题，可以将所有的初始化代码放在 removeAfter 方法中。

注意事项

如果在 iOS 上闪屏界面没有正确更新，或者在闪屏界面前有白屏界面，运行 flutter clean 然后重新编译应用。如果这样问题还未解决，删除应用、关机、重启设备、安装然后加载应用，如 this StackOverflow thread 所述。
该包在 Android 上更改了 launch_background.xml 和 styles.xml 文件，在 iOS 上更改了 LaunchScreen.storyboard 和 Info.plist ，在 Web 上更改了 index.html 。如果你手动更改了这些文件，该插件可能不能正常工作。如果发现任何 bug ，还请提出 issue 。

如何运转

Android

闪屏图像会被调整为 mdpi 、 hdpi 、 xhdpi 、 xxhdpi 和 xxxhdpi 的 drawable 。
用于闪屏图像 drawable ，包含 <bitmap> 的 <item> 标签会被添加到 launch_background.xml 中。
背景色会添加到 colors.xml 中，在 launch_background.xml 中被引用。
切换全屏的代码会被添加到 styles.xml 中。
黑暗模式的变量会被放置到 drawable-night 和 values-night 等资源文件夹中。

iOS

闪屏图像会被调整为 @3x 和 @2x 的图像。
color 和 image 属性会被插入到 LaunchScreen.storyboard 。
背景色使用单像素 png 文件拉伸到屏幕大小实现。
切换隐藏状态栏的代码会被添加到 Info.plist 。

Web

web/splash 文件夹会被创建用于放置闪屏界面的图像和 CSS 文件。
闪屏图像会被调整为 1x 、 2x 、 3x 和 4x 大小然后会放置到 web/splash/img 中。
闪屏样式表会被添加到应用的 web/index.html 文件中，和用作闪屏图片的 HTML 。

感谢

该包最初是由 Henrique Arthur 创建的，现在由 Jon Hanson 维护。

bug 或请求

如果遇到任何问题，可自由提出 issue 。如果感觉该库缺少某些特性，请在该票上提出。也欢迎 PR 。

[译]Flutter闪屏画面库flutter_native_splash

新内容

用法