Flutter启动画面插件splash_master的使用

Banner

简介

Splash Master 是一个Flutter插件，旨在简化为应用程序添加启动画面（splash screens）的过程。该插件负责所有必要的原生端设置，从而节省时间和精力。它支持视频、Lottie动画、图片和自定义Flutter小部件，为用户提供多种创意选择。通过在 pubspec.yaml 中添加 splash_master 部分来定义所需细节即可。此外，该插件确保从原生到Flutter应用的平滑过渡，提升用户体验。

预览

Android	iOS

安装

在 pubspec.yaml 文件中添加 splash_master 作为依赖项：

dependencies:
  splash_master: <Latest Version>

请从 pub.dev 获取最新版本号。

使用说明

1. 设置启动画面

在 pubspec.yaml 文件中添加 splash_master 配置段落：

splash_master:
  color: '#FFFFFF' # 启动画面的颜色
  image: 'assets/splash.png' # 启动画面的图片路径
  ios_content_mode: 'center' # iOS平台图片显示模式
  android_gravity: 'center' # Android平台图片重力方向
  background_image: 'assets/background_image.png' # 背景图片路径
  ios_background_content_mode: 'scaleToFill' # iOS平台背景图片显示模式
  android_background_image_gravity: 'fill' # Android平台背景图片重力方向
  image_dark_android: 'assets/splash_dark.png' # Android暗黑模式下的图片路径
  android_dark_gravity_key: 'center' # Android暗黑模式下图片重力方向
  color_dark_android: '#000000' # Android暗黑模式下的颜色
  android_12_and_above:
    color: '#FFFFFF' # Android 12及以上版本启动画面颜色
    image: 'assets/splash_12.png' # Android 12及以上版本启动画面图片路径
    branding_image: 'assets/branding_image.png' # 品牌标识图片路径

2. 创建并设置启动画面

运行以下命令以创建并在原生侧设置启动画面：

dart run splash_master create

或者激活 splash_master 全局命令后直接使用：

dart pub global activate splash_master
splash_master create

3. 在Flutter端设置

根据需要选择不同的组件类型（视频、Lottie动画或图片），并在 main.dart 文件中进行如下配置：

视频示例代码

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SplashMaster.initialize();
  runApp(
    MaterialApp(
      home: SplashMaster.video(
        source: AssetSource('assets/splash_video.mp4'), // 替换为你的视频资源路径
        videoConfig: VideoConfig(
          videoVisibilityEnum: VisibilityEnum.useAspectRatio, // 可选配置项
        ),
        backGroundColor: Colors.white,
        nextScreen: Home(), // 替换为你自己的主页面
      ),
    ),
  );
}

Lottie动画示例代码

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SplashMaster.initialize();
  runApp(
    MaterialApp(
      home: SplashMaster.lottie(
        source: AssetSource('assets/splash_lottie.json'), // 替换为你的Lottie动画资源路径
        lottieConfig: LottieConfig(),
        backGroundColor: Colors.white,
        nextScreen: Home(), // 替换为你自己的主页面
      ),
    ),
  );
}

图片示例代码

对于图片类型的启动画面，需要显式调用 SplashMaster.resume() 方法来恢复Flutter应用：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SplashMaster.initialize();
  SplashMaster.resume(); // 显式恢复Flutter应用
  runApp(
    MaterialApp(
      home: YourWidget(), // 替换为你自己的主页面
    ),
  );
}

自定义小部件示例代码

如果你想要使用自定义的小部件作为启动画面，可以按照如下方式配置：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SplashMaster.initialize();
  runApp(
    MaterialApp(
      home: YourCustomWidget(), // 替换为你自己的自定义小部件
    ),
  );
}

注意事项

• initialize() 方法会阻止Flutter帧渲染直到初始化完成。要恢复Flutter帧渲染，请调用 resume() 方法。
• 如果你使用了 SplashMaster.video() 或 SplashMaster.lottie() 方法，则无需显式调用 resume()，因为这些方法会在媒体加载完成后自动恢复Flutter帧渲染。
• onSourceLoaded 回调函数可以在提供的媒体加载完毕时触发，如果你没有提供此参数或未使用 SplashMaster 小部件，则需自行负责调用 resume() 函数。

属性说明

以下是 SplashMaster.video() 和 SplashMaster.lottie() 的共有属性列表：

以上就是关于 splash_master 插件的基本介绍和使用方法，希望对大家有所帮助！如果还有其他问题欢迎留言交流。