qidao123.com技术社区-IT企服评测·应用市场

标题: Flutter 学习之旅 之 flutter 使用flutter_native_splash 简单实现设备启动短暂白屏黑屏（闪屏）的题目 [打印本页]

---

作者: 老婆出轨    时间: 2025-5-9 06:04
标题: 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 添加

1. dependencies:
2.   flutter_native_splash: ^2.4.5

复制代码

四、简单案例实现

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

2、创建一个 application 的 Flutter 项目

3、创建的工程结构如下

4、连接设备，运行如下

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

6、添加上对应配置

1. flutter_native_splash:
2.   # 设置启动屏幕的背景颜色，这里设置为黑色
3.   color: "#000000"
5.   # 设置启动屏幕的背景图片，图片路径为 assets/splash.png
6.   background_image: "assets/splash.png"
8.   # 针对 Android 12 及以上版本的特殊配置
9.   android_12:
10.     # 在 Android 12 及以上版本中，设置启动图标图片
11.     # 注意：此图片会显示在圆形区域内，建议设计为正方形且内容居中
12.     image: "assets/splash.png"

复制代码

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

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

1. dart run flutter_native_splash:create

复制代码

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

五、其他

   

• color 和 background_image 不能同时设置：
  
  
  
  • 如果同时设置了 color 和 background_image，flutter_native_splash 会报错。只能选择一个作为启动屏幕的配景。
    
  • 如果需要配景图片，确保图片的尺寸和内容结构适合表现。
    
  
  
• 图片路径：
  
  
  
  • 确保 assets/splash.png 文件存在于项目标 assets 目次下，并且在 pubspec.yaml 文件中正确配置了 assets 路径：
    yaml复制
    
    1. flutter:
    2.   assets:
    3.     - assets/splash.png

    复制代码
  
  
• Android 12 的特别处理：
  
  
  
  • 在 Android 12 及以上版本中，image 参数设置的图片会被裁剪为圆形表现。因此，发起使用正方形图片，并确保重要内容位于图片中心，以避免被裁剪。
    
  
  
• 天生启动屏幕：
  
  
  
  • 配置完成后，运行以下命令天生启动屏幕：
    bash复制
    
    1. flutter pub run flutter_native_splash:create

    复制代码
  
  

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/)

Powered by Discuz! X3.4