Ho to add particle effects to anything

Today we are introduce another animated particle effect package called @pimp_my_button .By using this package we can add particle effect to any content like buttons ,listview etc.@pimp_my_button is totally free and opensource and you can download this package from github site.
See below for download link and sample installation.

Features

• Customizable
• Easy to use
• A lot of premade particles

Installation

Add following to your package’s pubspec.yaml file:
Check following url to get latest version on Pub and replace below section

dependencies:
  pimp_my_button: ^1.0.0

After save the pimp_my_button packages are automatically downloaded and included into your project.

Implementation

Now in your Dart code, import following line of code

import 'package:pimp_my_button/pimp_my_button.dart';

Example

The basic setup looks like this:

PimpedButton(
  particle: DemoParticle(),
  pimpedWidgetBuilder: (context, controller) {
    return FloatingActionButton(onPressed: () {
      controller.forward(from: 0.0);
    },);
  },
);

The pimpedWidgetBuilder uses a builder which besides providing a new context and an AnimationController. When your button is pressed call this code:

controller.forward(from: 0.0);

It’s important to include the from field because otherwise the animation won’t play after the first tap.

The particle specified in the PimpedButton controlls what the animation looks like.

Here is what were are going to build:

Each particle has to extend Particle and override this method: void paint(Canvas canvas, Size size, progress, seed)

• Canvas is the canvas you can paint on
• The size is the bounding box of the the enclosing widget
• Progress is a double between 0 and 1, it reflects the progress in the animation
• The seed is an int value generated once for every tap. When dealing with randoms, initialize your Random with that seed (so every frame is synced)

First particle

CompositeParticle(
  children: []
).paint(canvas, size, progressm seed);

You have to paint atleast one Particle in the paint(.,.,.,) method. Usually this would be the CompositeParticle.

The CompositeParticle doesn’t do much on its own. It only paints all of its children.

Adding actual particles

The next interesting particle is the CircleMirror and RectangeMirror.

    CircleMirror(
        numberOfParticles: 6,
        child: AnimatedPositionedParticle(
          begin: Offset(0.0, 20.0),
          end: Offset(0.0, 60.0),
          child: FadingRect(width: 5.0, height: 15.0, color: Colors.pink),
        ),
        initialRotation: -pi / randomMirrorOffset),

This mirrors its particle around the middle point in a circular shape. In this case you provide one Particle which is going to be drawn multiple times, thus looking identical. If you want different particles (or the same with randomized values), use the CircleMirror.builder.

At the bottom of the hierarchy is the FadingRect, all it does is drawing a rectangle which fades out over time. To make it move, it’s wrapped in an AnimatedPositionedParticle.

Demo