Flutter粒子效果插件particle_forked的使用

Flutter粒子效果插件particle_forked的使用

简介

这个包提供了在Flutter项目中轻松添加粒子动画的方法。

粒子效果1 粒子效果2

开始使用

首先，确保在你的Flutter项目中添加以下依赖：

dependencies:
  particle_forked: "^0.1.1"

然后运行 flutter packages upgrade 或者在IntelliJ中更新你的包。

如何使用

下面是一个完整的示例，展示了如何使用particle_forked插件创建一个带有粒子动画的屏幕。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        backgroundColor: Colors.black,
        body: CircularParticleScreen(),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;
    double screenWidth = MediaQuery.of(context).size.width;
    return Center(
      child: Container(
        key: UniqueKey(),
        child: Center(
          child: CircularParticle(
            // 设置粒子的参数
            awayRadius: 80, // 粒子远离中心的距离
            numberOfParticles: 200, // 粒子的数量
            speedOfParticles: 1, // 粒子的速度
            height: screenHeight, // 容器的高度
            width: screenWidth, // 容器的宽度
            onTapAnimation: true, // 是否启用点击动画
            particleColor: Colors.white.withAlpha(150), // 粒子的颜色
            awayAnimationDuration: Duration(milliseconds: 600), // 远离动画的持续时间
            maxParticleSize: 8, // 粒子的最大尺寸
            isRandSize: true, // 是否随机大小
            isRandomColor: true, // 是否随机颜色
            randColorList: [ // 随机颜色列表
              Colors.red.withAlpha(210),
              Colors.white.withAlpha(210),
              Colors.yellow.withAlpha(210),
              Colors.green.withAlpha(210)
            ],
            awayAnimationCurve: Curves.easeInOutBack, // 动画曲线
            enableHover: true, // 是否启用悬停效果
            hoverColor: Colors.white, // 悬停颜色
            hoverRadius: 90, // 悬停半径
            connectDots: true, // 是否连接点（不推荐）
          ),
        ),
      ),
    );
  }
}

更多关于Flutter粒子效果插件particle_forked的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter粒子效果插件particle_forked的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


particle_forked 是一个 Flutter 插件，用于在 Flutter 应用中创建粒子效果。它是 particle 插件的一个分支，提供了更多的自定义选项和功能。以下是如何在 Flutter 项目中使用 particle_forked 插件的步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  particle_forked: ^1.0.0  # 请检查最新版本

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

2. 导入插件

在需要使用粒子效果的 Dart 文件中导入 particle_forked 插件：

import 'package:particle_forked/particle_forked.dart';

3. 创建粒子效果

你可以使用 ParticleWidget 来创建粒子效果。以下是一个简单的示例：

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

class ParticleExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Particle Effect Example'),
      ),
      body: Center(
        child: ParticleWidget(
          numberOfParticles: 100,
          particleColor: Colors.blue,
          speed: 1.0,
          maxSize: 10.0,
          minSize: 2.0,
          awayRadius: 100.0,
          awayAnimationDuration: Duration(seconds: 2),
          awayAnimationCurve: Curves.easeInOut,
          enableHover: true,
          hoverRadius: 50.0,
          hoverAnimationDuration: Duration(seconds: 1),
          hoverAnimationCurve: Curves.easeInOut,
          onTapAnimation: true,
          tapAnimationDuration: Duration(seconds: 1),
          tapAnimationCurve: Curves.easeInOut,
        ),
      ),
    );
  }
}
回到顶部