插件介绍

fluttertpc_flutter_native_splash 是一个专为 Flutter 应用开发的自定义启动屏幕插件，特别适配了鸿蒙(HarmonyOS)平台。该插件能够帮助开发者自定义应用在启动时显示的原生启动屏幕，包括背景颜色、启动图片、深色模式支持等功能，让应用在加载 Flutter 引擎的过程中展示更加专业和个性化的视觉效果。

主要功能特点：

• 支持自定义背景颜色和背景图片
• 支持添加启动图标和品牌标识
• 支持深色模式适配
• 支持全屏启动屏幕
• 支持在应用初始化完成后手动移除启动屏幕
• 提供多环境（Flavor）支持

如何使用插件

1. 包的引入

由于这是一个自定义修改版本的三方库，需要以 git 形式引入。在你的 Flutter 项目的 pubspec.yaml 文件中，添加以下依赖配置：

dependencies:
  flutter_native_splash:
    git:
      url: "https://gitcode.com/openharmony-tpc/flutter_packages.git"
      path: "packages/flutter_native_splash/flutter_native_splash"

添加依赖后，运行以下命令获取包：

flutter pub get

2. 配置启动屏幕

在项目根目录创建一个名为 flutter_native_splash.yaml 的配置文件，用于定义启动屏幕的样式。以下是一个基本配置示例：

flutter_native_splash:
  # 背景颜色
  color: "#42a5f5"

  # 启动图片（可选，需是png格式）
  # image: assets/splash.png

  # 品牌标识图片（可选，需是png格式）
  # branding: assets/logo.png

  # 深色模式配置（可选）
  # color_dark: "#042a49"
  # image_dark: assets/splash_dark.png
  # branding_dark: assets/logo_dark.png

  # 全屏设置（可选，默认false）
  # fullscreen: true

  # 启动图片位置（可选，默认center）
  # android_gravity: center
  # ios_content_mode: center

3. 生成启动屏幕代码

运行以下命令生成鸿蒙平台所需的原生启动屏幕代码：

dart run flutter_native_splash:create

如果你的配置文件不在项目根目录，可以使用 --path 参数指定路径：

dart run flutter_native_splash:create --path=path/to/flutter_native_splash.yaml

4. API 的调用

基本使用

默认情况下，启动屏幕会在 Flutter 绘制第一帧时自动移除。如果你的应用需要在启动屏幕显示期间进行初始化操作，可以使用 preserve() 和 remove() 方法。

import 'package:flutter/material.dart';
import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  // 初始化 Flutter 绑定
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();

  // 保留启动屏幕
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

  // 运行应用
  runApp(const MyApp());

  // 执行初始化操作
  initializeApp();
}

// 模拟应用初始化操作
Future<void> initializeApp() async {
  // 执行一些耗时的初始化操作，如加载资源、初始化数据库等
  await Future.delayed(const Duration(seconds: 3));

  // 初始化完成后移除启动屏幕
  FlutterNativeSplash.remove();
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Native Splash Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Native Splash Demo'),
      ),
      body: const Center(
        child: Text(
          '欢迎使用 Flutter Native Splash!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

多环境（Flavor）支持

如果你需要为不同环境（如开发、测试、生产）配置不同的启动屏幕，可以创建多个配置文件：

flutter_native_splash-development.yaml
flutter_native_splash-testing.yaml
flutter_native_splash-production.yaml

然后使用 --flavor 参数生成对应环境的启动屏幕：

dart run flutter_native_splash:create --flavor development

或者一次生成所有环境的启动屏幕：

dart run flutter_native_splash:create --flavors development,testing,production

API 参考

FlutterNativeSplash API

方法名	描述	参数类型	返回值	鸿蒙支持
preserve	保留启动屏幕直至调用移除方法	{required WidgetsBinding widgetsBinding}	无	yes
remove	立即移除启动屏幕	无	无	yes

约束与限制

• 支持的 Flutter 版本：3.7.12-ohos-1.0.6 和 3.22.1-ohos-1.0.1
• 支持的鸿蒙 SDK 版本：5.0.0(12)
• 支持的 DevEco Studio 版本：5.0.13.200
• 启动图片必须是 PNG 格式
• 目前不支持动画、Lottie 或 GIF 格式的启动屏幕

总结

fluttertpc_flutter_native_splash 是一个功能强大的插件，能够帮助开发者在鸿蒙平台上轻松自定义 Flutter 应用的原生启动屏幕。通过简单的配置和命令，你可以实现个性化的启动屏幕效果，包括背景颜色、图片、深色模式支持等。此外，该插件还提供了启动屏幕保留功能，允许你在应用初始化完成后再移除启动屏幕，提供了更好的用户体验。

使用该插件的步骤非常简单：

1. 在 pubspec.yaml 中添加 git 依赖
2. 创建 flutter_native_splash.yaml 配置文件
3. 运行命令生成原生启动屏幕代码
4. 在应用中根据需要使用 preserve() 和 remove() 方法

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net