Flutter创意动画效果插件hole_spread_splash的使用

Hole Spread Splash简介

Hole Spread Splash 是一个用于 Flutter 的动画插件，提供了带有扩展孔动画效果的启动屏幕。它通过在启动屏幕和主屏幕之间创建一个视觉上吸引人的过渡效果，为你的 Flutter 应用程序增添了动态美感。

特性

• 可定制的孔大小、位置和颜色
• 可调整的动画持续时间
• 易于集成到你的 Flutter 应用程序中

安装

要将 Hole Spread Splash 插件添加到你的 Flutter 项目中，请按照以下步骤操作：

1. 在 pubspec.yaml 文件中添加以下依赖项：

   dependencies:
     hole_spread_splash: ^0.0.2
   

2. 运行以下命令以安装包：

   flutter pub get
   

使用方法

1. 导入插件

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

import 'package:hole_spread_splash/hole_spread_splash.dart';

2. 创建并自定义 Splash 实例

通过传递所需的参数（如 Logo、孔的颜色、外层颜色等）来创建 Splash 实例。

Splash splash = Splash(
  logo: MyLogoWidget(), // 自定义 Logo
  holeColor: Colors.amber, // 孔的颜色
  outerColor: Colors.black, // 外层颜色
  additionalLogo: AdditionalLogoWidget(), // 额外的 Logo
  animationDuration: Duration(seconds: 2), // 动画时长
);

3. 配置路由

在 MaterialApp 中配置初始路由 /splash 并将其指向 Splash 页面。

import 'package:flutter/material.dart';
import 'package:hole_spread_splash/hole_spread_splash.dart';
import 'home_page.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/splash',
      routes: {
        '/': (context) => const HomePage(), // 主页面
        '/splash': (context) => Splash(
          logo: Center(
            child: Image.asset(
              'assets/images/hong.gif', // 启动屏幕的 Logo 图片
              width: 150,
              height: 150,
            ),
          ),
          destinationPage: const HomePage(), // 跳转的目标页面
          holeColor: Colors.amber, // 孔的颜色
          outerColor: Colors.black, // 外层颜色
          additionalLogo: const Center(
            child: Text(
              'Hong Jinkyeong', // 额外的文本 Logo
              style: TextStyle(fontSize: 24),
            ),
          ),
          additionalLogoTopPosition: 120, // 额外 Logo 的顶部位置
        ),
      },
    );
  }
}

4. 运行应用

运行你的 Flutter 应用程序，并体验带有扩展孔动画效果的启动屏幕！

示例代码

以下是完整的示例代码，展示了如何使用 hole_spread_splash 插件实现启动屏动画：

import 'package:flutter/material.dart';
import 'package:hole_spread_splash/hole_spread_splash.dart';
import 'home_page.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/splash',
      routes: {
        '/': (context) => const HomePage(),
        '/splash': (context) => Splash(
          logo: Center(
            child: Image.asset(
              'assets/images/hong.gif', // 替换为你的启动 Logo 路径
              width: 150,
              height: 150,
            ),
          ),
          destinationPage: const HomePage(),
          holeColor: Colors.amber, // 孔的颜色
          outerColor: Colors.black, // 外层颜色
          additionalLogo: const Center(
            child: Text(
              'Hong Jinkyeong', // 额外的文本 Logo
              style: TextStyle(fontSize: 24),
            ),
          ),
          additionalLogoTopPosition: 120, // 额外 Logo 的顶部位置
        ),
      },
    );
  }
}