Flutter 学习之旅 之 flutter 使用flutter

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 会报错。只能选择一个作为启动屏幕的背景。

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

           • 图片路径：

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

               yaml复制

               flutter:
                 assets:
                   - assets/splash.png

             • Android 12 的特殊处理：

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

               • 生成启动屏幕：

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

                   bash复制

                   flutter pub run flutter_native_splash:create

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