Flutter粒子效果插件particle_aa的使用

particle_aa 是一个用于 Flutter 应用程序的粒子效果插件。本文将通过一个完整的示例来演示如何在 Flutter 中使用 particle_aa 插件。

开始使用

项目结构

首先，确保你已经设置好了 Flutter 环境，并且安装了所需的依赖包。你可以通过以下命令来创建一个新的 Flutter 项目：

flutter create particle_aa_example
cd particle_aa_example

然后，在 pubspec.yaml 文件中添加 particle_aa 依赖：

dependencies:
  flutter:
    sdk: flutter
  particle_aa: ^1.0.0

运行 flutter pub get 来获取依赖。

示例代码

接下来，我们来看一下如何在应用中使用 particle_aa 插件。

main.dart

import 'package:flutter/material.dart';
import 'package:particle_aa/particle_aa.dart'; // 导入粒子效果插件
import 'package:oktoast/oktoast.dart';

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

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

  // 这个小部件是你的应用的根。
  @override
  Widget build(BuildContext context) {
    return OKToast(
      // 包装你的应用以使用 OKToast
      textStyle: const TextStyle(fontSize: 19.0, color: Colors.white),
      backgroundColor: Colors.black,
      animationCurve: Curves.easeIn,
      animationBuilder: const OffsetAnimationBuilder().call,
      animationDuration: const Duration(milliseconds: 200),
      duration: const Duration(seconds: 5),
      child: MaterialApp(
        theme: ThemeData(primarySwatch: Colors.blue), // 设置主题颜色
        home: const MyHomePage(title: 'Particle AA Demo'),
      ),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: SizedBox(
                  width: 200,
                  height: 50,
                  child: ElevatedButton(
                    onPressed: () => {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const ParticleAAPage(), // 跳转到粒子效果页面
                        ),
                      )
                    },
                    child: const Text(
                      "启动粒子效果",
                      style: TextStyle(fontSize: 20),
                    ),
                  )),
            ),
          ],
        ),
      ),
    );
  }
}

// 定义粒子效果页面
class ParticleAAPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("粒子效果"),
      ),
      body: Center(
        child: ParticleAA(
          particlesCount: 100, // 颗粒数量
          duration: const Duration(seconds: 5), // 持续时间
          sizeRange: const SizeRange(min: 1.0, max: 5.0), // 大小范围
          speed: const Speed(x: 1.0, y: 1.0), // 速度
          colors: [Colors.red, Colors.blue], // 颜色
        ),
      ),
    );
  }
}

运行示例

现在，你可以运行你的应用并查看粒子效果。在主页面上点击“启动粒子效果”按钮，将会跳转到包含粒子效果的页面。

flutter run

这样，你就成功地在 Flutter 应用中集成了 particle_aa 插件，并实现了粒子效果。