Flutter原生启动屏插件flutter_native_splash_ohos的使用

Flutter原生启动屏插件flutter_native_splash_ohos的使用

当您的应用程序打开时，在本机应用加载Flutter期间会有一段短暂的时间。默认情况下，在这段时间内，本机应用会显示一个白色启动屏幕。此插件会自动生成Harmony代码以定制此本机启动屏幕的背景颜色和启动图像。支持暗模式、全屏和平台特定选项。

启动屏演示 暗模式启动屏演示

新功能

支持在Web上使用GIF图像。

现在可以在应用程序初始化期间保持启动屏！不再需要第二个启动屏。只需结合使用preserve和remove方法即可在初始化完成后移除启动屏。有关详细信息，请参阅此处。

使用方法

如果您更喜欢视频教程，可以查看Johannes Milke的教程。

首先，在pubspec.yaml文件中添加flutter_native_splash作为依赖项。

dependencies:
  flutter_native_splash: ^2.3.1

别忘了运行flutter pub get。

1. 设置启动屏

自定义以下设置，并将其添加到项目的pubspec.yaml文件中，或者放在根项目文件夹下的名为flutter_native_splash.yaml的新文件中。

flutter_native_splash:
   # 此包会生成Harmony代码以自定义Flutter默认的白色本机启动屏
   # 使用背景颜色和启动图像进行定制。
   # 自定义以下参数，并在终端中运行以下命令：
   # dart run flutter_native_splash:create
   # 要恢复Flutter的默认白色启动屏，可以在终端中运行以下命令：
   # dart run flutter_native_splash:remove

   # color或background_image是唯一必需的参数。使用color设置启动屏的背景为纯色。使用background_image设置启动屏的背景为png图像。这适用于渐变效果。图像将被拉伸到应用程序的大小。只能设置一个参数，不能同时设置color和background_image。
   color: "#e1f5fe"
   #background_image: "assets/background.png"

   # 可选参数列表如下。要启用参数，请取消注释行（删除前面的#字符）。

   # image参数允许指定用于启动屏的图像。它必须是一个png文件，并应按4x像素密度调整大小。
   image: assets/logo_lockup_flutter_vertical.png

   # branding属性允许指定用作启动屏品牌标志的图像。它必须是一个png文件。
   #branding: assets/dart.png

   # 要将品牌图像定位在屏幕底部，可以使用bottom、bottomRight和bottomLeft。如果未指定或指定其他值，默认值为bottom。
   #branding_mode: bottom

   # color_dark、background_image_dark、image_dark和branding_dark是参数，用于设置设备处于深色模式时的背景和图像。如果不指定这些参数，则应用程序将使用上述参数。如果指定了image_dark参数，则必须指定color_dark或background_image_dark。color_dark和background_image_dark不能同时设置。
   color_dark: "#e1f5fe"
   #background_image_dark: "assets/dark-background.png"
   image_dark: assets/logo_lockup_flutter_vertical_wht.png
   #branding_dark: assets/dart_dark.png

   # 启动屏背景颜色。
   color: "#42a5f5"

   # 应用图标背景颜色。
   icon_background_color: "#eeeeee"

   # branding属性允许指定用作启动屏品牌标志的图像。
   #branding: assets/dart.png

   # image_dark、color_dark、icon_background_color_dark和branding_dark设置在设备处于深色模式时的应用参数。如果不指定这些参数，则应用程序将使用上述参数。
   #image_dark: assets/android12splash-invert.png
   #color_dark: "#042a49"
   #icon_background_color_dark: "#111111"

   # android、ios和web参数可用于禁用特定平台上的启动屏生成。
   #android: false
   #ios: false
   #harmony: false
   #web: false

   # 可以使用以下参数指定特定平台的图像，这些参数将覆盖相应的参数。您可以指定所有、部分或不指定这些参数：
   #color_android: "#42a5f5"
   #color_dark_android: "#042a49"
   #color_ios: "#42a5f5"
   #color_dark_ios: "#042a49"
   #color_web: "#42a5f5"
   #color_dark_web: "#042a49"
   #image_android: assets/splash-android.png
   #image_dark_android: assets/splash-invert-android.png
   #image_ios: assets/splash-ios.png
   #image_dark_ios: assets/splash-invert-ios.png
   #image_web: assets/splash-web.png
   #image_dark_web: assets/splash-invert-web.png
   #background_image_android: "assets/background-android.png"
   #background_image_dark_android: "assets/dark-background-android.png"
   #background_image_ios: "assets/background-ios.png"
   #background_image_dark_ios: "assets/dark-background-ios.png"
   #background_image_web: "assets/background-web.png"
   #background_image_dark_web: "assets/dark-background-web.png"
   #branding_android: assets/brand-android.png
   #branding_dark_android: assets/dart_dark-android.png
   #branding_ios: assets/brand-ios.png
   #branding_dark_ios: assets/dart_dark-ios.png

   # 溢出图像的位置可以通过android_gravity、ios_content_mode和web_image_mode参数设置。所有参数默认值为center。
   #
   # 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'

   # [Harmony] 如果您更改了module.json5文件的名称，可以使用harmony_module_json参数指定文件名。仅需删除以下三行前的#字符，不要删除空格：
   #harmony_module_json: 'ohos/entry/src/main/module.json5'

   # [Harmony] 如果您更改了Index.ets文件的名称，可以使用harmony_index_ets参数指定文件名。仅需删除以下三行前的#字符，不要删除空格：
   #harmony_index_ets: 'ohos/entry/src/main/ets/pages/Index.ets'

2. 运行插件

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

dart run flutter_native_splash:create

当插件运行完毕后，您的启动屏就准备好了。

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

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

3. 设置应用程序初始化（可选）

默认情况下，启动屏将在Flutter绘制第一帧时移除。如果您希望在应用程序初始化期间保持启动屏，可以结合使用preserve()和remove()方法。通过向preserve()方法传递WidgetsFlutterBinding.ensureInitialized()返回的值来保持启动屏。稍后，在应用程序初始化完成后，调用remove()以移除启动屏。

import 'package:flutter_native_splash_ohos/flutter_native_splash.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

// 当您的初始化完成时，移除启动屏：
FlutterNativeSplash.remove();

注意：如果您不需要使用preserve()和remove()方法，可以在pubspec.yaml文件的dev_dependencies部分放置flutter_native_splash依赖项。

4. 支持插件（可选）

如果您觉得这个插件有用，可以通过点赞支持它。以下是另一种支持插件的方式：

支持插件

多环境支持

如果您有一个包含多个环境或场景的项目，并且创建了多个场景，这是一个适合您的功能。

无需维护多个文件并复制粘贴图像，现在，您可以使用此工具为不同的环境创建不同的启动屏。

预先要求

为了使用新功能并为您的应用程序生成所需的启动图像，需要进行一些更改。

如果您只想生成一种场景和一个文件，可以使用如步骤1所述的任一选项。但是，为了设置场景，您需要将所有设置值移动到flutter_native_splash.yaml文件中，但需要添加前缀。

假设您有3种不同的场景：Production、Acceptance、Development。

首先，您需要为所有3个场景创建不同的设置文件，并添加后缀，如下所示：

flutter_native_splash-production.yaml
flutter_native_splash-acceptance.yaml
flutter_native_splash-development.yaml

您需要以相同的方式设置这3个文件，但根据生成的环境使用不同的资产。例如（注意：这些只是示例，您可以根据项目需求使用任何已支持的设置）：

# flutter_native_splash-development.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-development.png
  branding: assets/branding-development.png
  color_dark: "#121212"
  image_dark: assets/logo-development.png
  branding_dark: assets/branding-development.png

# flutter_native_splash-acceptance.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-acceptance.png
  branding: assets/branding-acceptance.png
  color_dark: "#121212"
  image_dark: assets/logo-acceptance.png
  branding_dark: assets/branding-acceptance.png

# flutter_native_splash-production.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-production.png
  branding: assets/branding-production.png
  color_dark: "#121212"
  image_dark: assets/logo-production.png
  branding_dark: assets/branding-production.png

如果您只想生成一种场景（也许您正在测试某些内容），您可以使用单个命令，如下所示：

# 如果您有一个名为production的场景，您可以这样做：
dart run flutter_native_splash:create --flavor production

# 对于名为staging的场景，您可以这样提供其名称：
dart run flutter_native_splash:create --flavor acceptance

# 如果您有一个本地版本供开发人员使用，您可以这样做：
dart run flutter_native_splash:create --flavor development

您还可以在一个命令中指定所有场景，如下所示：

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

注意：可用场景需要逗号分隔才能使此选项生效。

常见问题

动画/Lottie/GIF图像是否受支持？

目前不支持。PR始终欢迎！

我能否基于应用程序设置控制亮暗模式？

不可以。此包会在Flutter加载之前显示启动屏。因此，当启动屏加载时，内部应用程序设置无法提供给启动屏。不幸的是，这意味着无法通过应用程序设置控制启动屏的亮暗模式。

Bug或请求

如果您遇到任何问题，请随时在这里打开一个问题。如果您认为库缺少功能，请在此处提出请求。欢迎提交Pull Request。

示例代码

example/lib/main.dart

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

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    initialization();
  }

  void initialization() async {
    print('ready in 3...');
    await Future.delayed(const Duration(seconds: 1));
    print('ready in 2...');
    await Future.delayed(const Duration(seconds: 1));
    print('ready in 1...');
    await Future.delayed(const Duration(seconds: 1));
    print('go!');
    FlutterNativeSplash.remove();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

更多关于Flutter原生启动屏插件flutter_native_splash_ohos的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter原生启动屏插件flutter_native_splash_ohos的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_native_splash_ohos 是一个用于在 Flutter 应用中实现原生启动屏的插件，特别针对 OpenHarmony（OHOS）平台进行了优化。它允许开发者在应用启动时显示一个自定义的启动屏，以提升用户体验。

以下是使用 flutter_native_splash_ohos 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_native_splash_ohos 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_native_splash_ohos: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 配置启动屏

在 pubspec.yaml 文件中配置启动屏的相关参数。以下是一个示例配置：

flutter_native_splash_ohos:
  image: assets/splash.png  # 启动屏图片路径
  color: "#42a5f5"  # 启动屏背景颜色
  android: true  # 是否在 Android 平台启用
  ios: true  # 是否在 iOS 平台启用
  ohos: true  # 是否在 OpenHarmony 平台启用
  fullscreen: false  # 是否全屏显示
  status_bar_color: "#000000"  # 状态栏颜色
  navigation_bar_color: "#000000"  # 导航栏颜色

3. 生成启动屏配置

在终端中运行以下命令来生成启动屏的配置：

flutter pub run flutter_native_splash_ohos:create

这个命令会根据 pubspec.yaml 中的配置生成相应的启动屏资源文件，并自动更新项目的配置文件。

4. 在代码中初始化启动屏

在 main.dart 文件中初始化启动屏。通常，你需要在 runApp 之前调用 FlutterNativeSplashOhos.preserve() 来保留启动屏，然后在应用初始化完成后调用 FlutterNativeSplashOhos.remove() 来移除启动屏。

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

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplashOhos.preserve(widgetsBinding: widgetsBinding);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 在应用初始化完成后移除启动屏
    FlutterNativeSplashOhos.remove();

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Native Splash OHOS'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}
回到顶部