Flutter启动动画插件animated_splash的使用

在Flutter中，animated_splash 是一个非常方便的插件，用于创建带有动画效果的启动屏幕。以下是详细的使用说明和示例代码。

使用 animated_splash 插件

获取库

首先，在你的项目中添加依赖项。打开 pubspec.yaml 文件并添加以下内容：

dependencies:
  animated_splash: ^1.0.0

然后运行 flutter pub get 来安装依赖。

准备工作

在使用 animated_splash 之前，你需要完成以下准备工作：

1. 获取应用图标或Logo
   确保你有一个适合的Logo或图像文件，通常放置在 assets 文件夹中。

2. 准备启动后的初始化操作
   在启动屏幕显示期间，你可以执行一些后台任务，例如初始化数据库、共享偏好设置或Firebase配置等。

3. 指定启动后的目标页面
   确定启动屏幕消失后要跳转到的目标页面。

4. 设置启动屏的持续时间
   根据需要设置启动屏幕的显示时长（以毫秒为单位）。

导入插件

在你的 Dart 文件中导入 animated_splash 包：

import 'package:animated_splash/animated_splash.dart';

显示固定时长的启动屏幕

如果你想让启动屏幕仅显示一段时间，可以使用 StaticDuration 类型。

示例代码

void main() {
  runApp(MaterialApp(
    home: AnimatedSplash(
      imagePath: 'assets/flutter_icon.png', // Logo路径
      home: Home(), // 启动后的目标页面
      duration: 2500, // 持续时间（毫秒）
      type: AnimatedSplashType.StaticDuration, // 固定时长类型
    ),
  ));
}

在这个例子中，启动屏幕会显示 2.5 秒钟，然后自动跳转到 Home 页面。

执行后台任务并根据结果导航到不同页面

如果你想在启动屏幕显示期间执行一些后台任务，并根据任务的结果跳转到不同的页面，可以使用 BackgroundProcess 类型。

示例代码

void main() {
  // 定义后台任务函数
  Function duringSplash = () {
    print('执行后台任务...');
    int result = 123 + 23;

    // 根据任务结果返回值
    if (result > 100) {
      return 1; // 跳转到 Home 页面
    } else {
      return 2; // 跳转到 HomeSt 页面
    }
  };

  // 定义任务结果与目标页面的映射关系
  Map<int, Widget> op = {1: Home(), 2: HomeSt()};

  runApp(MaterialApp(
    home: AnimatedSplash(
      imagePath: 'assets/flutter_icon.png', // Logo路径
      home: Home(), // 默认目标页面
      customFunction: duringSplash, // 后台任务函数
      duration: 2500, // 持续时间（毫秒）
      type: AnimatedSplashType.BackgroundProcess, // 后台任务类型
      outputAndHome: op, // 任务结果与目标页面的映射
    ),
  ));
}

// 目标页面1
class Home extends StatefulWidget {
  [@override](/user/override)
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('My Cool App', style: TextStyle(fontSize: 20))),
    );
  }
}

// 目标页面2
class HomeSt extends StatefulWidget {
  [@override](/user/override)
  _HomeStState createState() => _HomeStState();
}

class _HomeStState extends State<HomeSt> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('My Cool App home page 2', style: TextStyle(fontSize: 20))),
    );
  }
}