Flutter粒子效果按钮插件flutter_partical_button的使用

Flutter粒子效果按钮插件flutter_partical_button的使用

flutter_partical_button 是一个用于在Flutter应用中创建带有粒子效果按钮的插件。该插件允许用户轻松地添加动态且高度可定制的粒子效果到任何按钮上。

特性

• 高度可定制：如果你不喜欢默认的粒子效果，可以轻松地自定义自己的粒子效果。
• 非常易于使用：只需几行代码即可实现粒子效果按钮。
• 大量预置粒子：插件自带多种预设粒子效果。

开始使用

要开始使用 flutter_partical_button，首先需要确保已经将插件添加到你的 pubspec.yaml 文件中：

dependencies:
  flutter_partical_button: ^1.0.0

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

接下来，你需要创建一个继承自 Particle 的类，并重写 paint 方法。例如：

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

class DemoParticle extends Particle {
  [@override](/user/override)
  void paint(Canvas canvas, Size size, double progress, int seed) {
    // 在这里绘制粒子效果
    final random = Random(seed);

    // 绘制圆形粒子
    final paint = Paint()
      ..color = Color.fromRGBO(
          random.nextInt(255), random.nextInt(255), random.nextInt(255), 1.0);

    final radius = size.width * progress;
    canvas.drawCircle(
        Offset(size.width / 2, size.height / 2), radius, paint);
  }
}

在这个例子中，我们创建了一个简单的圆形粒子效果。每次点击按钮时，粒子会从中心向外扩散。

使用示例

现在，我们可以使用 PimpedButton 将这个粒子效果应用到按钮上：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('粒子效果按钮示例')),
        body: Center(
          child: PimpedButton(
            particle: DemoParticle(),
            pimpedWidgetBuilder: (BuildContext context, AnimationController controller) {
              return FloatingActionButton(
                onPressed: () {
                  controller.forward(from: 0.0);
                },
                child: Icon(Icons.add),
              );
            },
          ),
        ),
      ),
    );
  }
}