Flutter闪屏画面库flutter_native_splash

Flutter闪屏画面库flutter_native_splash

bettersun

2022年02月11日 08:32 ·  阅读 2911

「这是我参与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 文件中。

 

yaml

复制代码

dependencies:
  flutter_native_splash: ^2.0.2

别忘了 flutter pub get 。

1. 闪屏界面

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

 

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. 运行此包

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

 

arduino

复制代码

flutter pub run flutter_native_splash:create

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

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

 

ini

复制代码

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

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

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

 

dart

复制代码

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 中是默认包含的：

 

xml

复制代码

<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 导致的，可以卸载应用、关机重启，然后尝试重新安装来解决。

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

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

2. 可能是由应用初始化的延迟导致的。要解决这个问题，可以将所有的初始化代码放在 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 。