Flutter 学习之旅 之 flutter 使用flutter_native_splash 简单实现设备启动短暂白屏黑屏（闪屏）的问题

Flutter 学习之旅 之 flutter 使用flutter_native_splash 简单实现设备启动短暂白屏黑屏（闪屏）的问题

目录

Flutter 学习之旅 之 flutter 使用flutter_native_splash 简单实现设备启动短暂白屏黑屏（闪屏）的问题

一、简单介绍

二、flutter_native_splash

三、安装 flutter_native_splash

四、简单案例实现

五、其他

---

一、简单介绍

Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。

Flutter 使用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 机器代码以及 JavaScript，从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库，开发者可以根据自己的需求灵活地控制每个像素，从而创建自定义的、适应性强的设计，这些设计在任何屏幕上都能呈现出色的外观和感觉。

二、flutter_native_splash

官网地址：flutter_native_splash | Flutter package

flutter_native_splash 是一个用于自定义 Flutter 应用启动屏幕的插件，支持设置背景颜色、启动图标等。它通过配置文件生成原生代码，实现跨平台（Android、iOS 和 Web）的启动屏幕定制。

使用 flutter_native_splash 时，需要注意以下几点：

    1、配置文件参数：

•         color 和 background_image 不能同时设置，只能选择一个。
•         image 参数指定的图片必须是 PNG 文件，且应为 4x 像素密度调整大小。
•         android_12 部分的 image 参数设置的图标，会裁剪为圆形，需注意图片尺寸和内容布局。

    2、Android 12 及以上版本：

•         Android 12 及以上版本的启动屏幕处理方式与之前版本不同，需在 android_12 部分进行特定配置。
•         带图标背景的应用图标应为 960×960 像素，适合直径为 640 像素的圆形；无图标背景的应用图标应为 1152×1152 像素，适合直径为 768 像素的圆形。

   3、 平台特定配置：

•         可以通过 android、ios 和 web 参数禁用在特定平台生成启动屏幕。
•         可以使用平台特定的参数（如 color_android、image_ios 等）覆盖通用参数。

    4、生成和移除启动屏幕：

•         配置完成后，运行 dart run flutter_native_splash:create 命令生成启动屏幕。
•         如需恢复 Flutter 默认的白色启动屏幕，运行 dart run flutter_native_splash:remove 命令。

三、安装 flutter_native_splash

1、直接运行命令

使用 Flutter：flutter pub add flutter_native_splash

2、或者在 pubspec.yaml 添加

dependencies:
  flutter_native_splash: ^2.4.5

四、简单案例实现

1、这里使用 Android Studio 进行创建 Flutter 项目

2、创建一个 application 的 Flutter 项目

3、创建的工程结构如下

4、连接设备，运行如下

5、明显，启动的时候会有短暂的黑屏现象，这里使用 flutter_native_splash，创建一个 flutter_native_splash.yaml 文件

6、添加上对应配置

flutter_native_splash:
  # 设置启动屏幕的背景颜色，这里设置为黑色
  color: "#000000"

  # 设置启动屏幕的背景图片，图片路径为 assets/splash.png
  background_image: "assets/splash.png"

  # 针对 Android 12 及以上版本的特殊配置
  android_12:
    # 在 Android 12 及以上版本中，设置启动图标图片
    # 注意：此图片会显示在圆形区域内，建议设计为正方形且内容居中
    image: "assets/splash.png"

7、记得对应添加上对应的图片信息

8、在终端使用命令进行创建

dart run flutter_native_splash:create

9、连接设备，运行效果如下

五、其他

1. color 和 background_image 不能同时设置：

   • 如果同时设置了 color 和 background_image，flutter_native_splash 会报错。只能选择一个作为启动屏幕的背景。

   • 如果需要背景图片，确保图片的尺寸和内容布局适合显示。

2. 图片路径：

   • 确保 assets/splash.png 文件存在于项目的 assets 目录下，并且在 pubspec.yaml 文件中正确配置了 assets 路径：

     yaml复制

     flutter:
       assets:
         - assets/splash.png

3. Android 12 的特殊处理：

   • 在 Android 12 及以上版本中，image 参数设置的图片会被裁剪为圆形显示。因此，建议使用正方形图片，并确保重要内容位于图片中心，以避免被裁剪。

4. 生成启动屏幕：

   • 配置完成后，运行以下命令生成启动屏幕：

     bash复制

     flutter pub run flutter_native_splash:create

通过这些注释和注意事项，可以更好地理解和使用 flutter_native_splash 插件来配置启动屏幕。